[Question] Snapping to values

[sghall]

[Question] Snapping to values

[sghall]

Hey there, sure, if I understand correctly, you can just use a custom mode. Just pass a function for the mode prop.

Here's a sandbox...
https://codesandbox.io/s/9z462x453w

        const domain = [10, 100];
        const defaultValues = [10];
        const validValues = [10, 24, 40, 100];

        ...

        <Slider
          mode={(curr, next) => { // custom mode 
            if (validValues.indexOf(next[0].val) !== -1) {
              return next;
            }

            return curr;
          }}
          step={2}
          domain={domain}
          rootStyle={sliderStyle}
          onUpdate={this.onUpdate}
          onChange={this.onChange}
          values={defaultValues}
        >

The custom mode function receives curr and next which are arrays of { key, val } objects. One item for each handle in the slider.

The built in modes look like this...
https://github.com/sghall/react-compound-slider/blob/master/src/Slider/modes.js

[sghall]

Alternatively, you can keep the options evenly spaced and format the ticks:
https://codesandbox.io/s/oy7m6wpjq

[Kaylen-Pillay]

Thank you so much for that explanation. I'm going to be working through this today, this is an AMAZING library