on change event

[Hamatek]

Hello @zhenyasav Nice package there ! I would like to set max value reactively , do you know how i can do that ? Here is my current code:

Template.amountSelector.onRendered ->
  myslider = new Slider('#slider',
    min: 0
    max: Session.get "maxAmount"
    value:10
    step: 0.01
    fill: "lower"
    orientation: 'horizontal'
  )
  myslider.element.addEventListener 'change', (event) ->
    console.log myslider.value()

[zhenyasav]

Maybe like this?

Template.amountSelector.onRendered ->
  myslider = new Slider '#slider',
    min: 0
    max: Session.get "maxAmount"
    value:10
    step: 0.01
    fill: "lower"
    orientation: 'horizontal'

  @autorun ->
    myslider.options.max = Session.get 'maxAmount'
    myslider.refresh()

Template.amountSelector.events
  'change #slider': (event) ->
    console.log event.originalEvent.value

Note you don't have to actually use .addEventListener when using it in Meteor, can simply use Template.events - the raw event object will have the value on it, and if it's wrapped in jQuery, you can get to it with originalEvent. Using this method is better because event handlers are attached more efficiently and removed when the template is removed from the dom.

[Hamatek]

@zhenyasav Thank you works great I didn't know i could use meteor events its even better ! :+1:

I notice that on mobile slider with max amount around 1000+ are very hard to select a precise amount, one solution I could think of is to have big steps and small steps inside big one. Do you think its possible to have a different step on knob first move until it reach big steps value ?

For example with a slider with min 0 max 1000, i want to get a value of 732.5, lets say step:10 i get to 730 then stop and on move knob again but now with a stepping of 0.01 only while my value is btw 2 big step so 730 to 740 i get a step of 0.01 but in my case i can just stop at 732.5.

is that something doable ? or maybe i missed this option ?

Thanks again , your are the best !:D

[zhenyasav]

I don't see why not ...

Template.amountSelector.events
  'change #slider': (e) ->
    myslider = Slider.getInstance e.target

    if 740 > e.originalEvent.value > 730
      myslider.options.step = 0.1
    else
      myslider.options.step = 10

    myslider.refresh()

That might work? Let me know.