Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Oct 15 2018 13:53
    quarterto closed #113
  • Oct 15 2018 13:52
    quarterto closed #115
  • Oct 15 2018 13:52
    quarterto closed #112
  • Oct 15 2018 13:52
    quarterto closed #111
  • Oct 15 2018 13:52
    quarterto closed #104
  • Oct 15 2018 13:52
    quarterto closed #92
  • Oct 15 2018 13:52
    quarterto closed #103
  • Oct 15 2018 13:52
    quarterto closed #102
  • Oct 15 2018 13:52
    quarterto closed #100
  • Oct 15 2018 13:52
    quarterto closed #99
  • Oct 15 2018 13:52
    quarterto closed #89
  • Oct 15 2018 13:52
    quarterto closed #88
  • Oct 15 2018 13:52
    quarterto closed #83
  • Oct 15 2018 13:52
    quarterto closed #82
  • Oct 15 2018 13:52
    quarterto closed #80
  • Oct 15 2018 13:52
    quarterto closed #77
  • Oct 15 2018 13:52
    quarterto closed #75
  • Oct 15 2018 13:52
    quarterto closed #74
  • Oct 15 2018 13:52
    quarterto closed #73
  • Oct 15 2018 13:03
    dremaditya opened #115
anhduc.bkhn
@anhducbkhn
like this
please help me
Eugene Toropov
@evt
Greetings. How can I remove a range from Elessar slider?
ah, found quarterto/Elessar#68
Matt Brennan
@quarterto
Not sure that's quite what you're looking for. The issue was talking about removing the gaps between the ranges, not a range itself
If you're looking to remove a range programatically, there's rangebar.removeRange(index)
If you want the users to be able to do it, there's the allowDelete option. Set it to true and users can double-middle-click to delete
Hope this helps!
Michael Harper
@mjharper84
ah this is better :)
Matt Brennan
@quarterto
Hi!
Michael Harper
@mjharper84
hullo!
Matt Brennan
@quarterto
so
my end goal is to have the range bar filled by default and when you drag to the left the rest of the bar fills with a new range
i'm not clear what you mean here
what's your use case?
Michael Harper
@mjharper84
I have a range bar with months 1 - 12, which on load are full (range 1 - 12)
so a big long blue bar
say someone drags it to the left to say October
I want the remaining two months to be filled with a new range
so I'll calculate the difference whenever someone moves the range slider
I just can't get it to add a new range on the change event
I'm definitely being an idiot
lol
Matt Brennan
@quarterto
ah, think i follow
so you start with
[Jan----------------------------------------Dec]
user drags the right handle:
[Jan------------------------------Oct]
And you want it to fill in so it's
[Jan------------------------------Oct][Nov--Dec]
Michael Harper
@mjharper84
yup, that's it :)
Matt Brennan
@quarterto
hmm
it's not exactly a use case that elessar supports
but it should be doable
Michael Harper
@mjharper84
I see, it's a really cool plugin btw
my use case is kind of like a timeline but without any empty segments
Matt Brennan
@quarterto
well, a rangebar with no gaps between the ranges is pretty much the same thing as a regular slider with multiple handles
Michael Harper
@mjharper84
that is true
Alexander Widmer
@ejthan
Hi, if i use the addRange function how can i abnormalise the values? for example [10, 20] should be [0.1, 0.2] with min 0 and max 100
btw thanks for this awesome plugin!
Matt Brennan
@quarterto
Hi @ejthan! It's not documented, but you can call rangeBar.abnormalise
i.e. rangeBar.addRange([10, 20].map(rangeBar.abnormalise, rangeBar))
Alexander Widmer
@ejthan
thanks that's exactly what i needed
Alexander Widmer
@ejthan
i try to update the model on the change event but the data attribute is missing in the range so i added the rangeBar but there are the values in the range again [0.1, 02] how can i denormalise the values again (just for the current range?)
Alexander Widmer
@ejthan
i found a solution range.range.map(range.perant.normalise, range.perant)
Todd H. Page
@thethp
Hi there, has anyone done any react livin' with elessar? I can't seem to get it functioning within react
Matt Brennan
@quarterto

hi @thethp! I've not tried it myself, but something like

class RangebarWrapper extends React.Component {
  constructor(props) {
    super(props);

    this.rangebar = new RangeBar({
      val: props.value,
      ...props.rangebarOptions
    });

    this.rangebar.on('change', () => this.onChange(this.rangebar.val()));
  }

  componentDidMount() {
    this.rangebar.$el.appendTo(this.refs.rangebarProxy);
  }

  onChange(val) {
    this.props.onChange(val);
  }

  componentWillReceiveProps(props) {
    this.rangebar.val(props.value);
  }

  render() {
    return <span ref="rangebarProxy"></span>;
  }
}

should work. what have you tried?