Allow custom step values

[teoulas]

The current step option, allows for linear values in the slider. It would be nice if the slider allowed a custom array of values. I can think of two use cases for this option:

1. A slider with non-linear numeric values, eg:
   100, 200, 500, 1000, 2000, 5000, 10000
2. A slider with non-numeric values (I know, a bit extreme), eg:
   "never", "rarely", "sometimes", "often"

Both cases can be implemented with a custom slide function, but it would be nice if this functionality was built-in. Here's a jsfiddle with the above examples: http://jsfiddle.net/KheWe/

[leongersen]

The example is a good one - I'll add it to the documentation. I'm not sure why I would add this functionality to the plugin core, since it would barely save any effort implementing the plugin, while increasing the file size even for those that don't need this. I'm -very- open for counter-arguments, though!

[teoulas]

Well, my only argument is to keep it simple for the users that want such functionality. It's not a lot of extra code, but if you want to get the slider values you need the extra boilerplate code. I guess it depends on how common this use case is among the users of the library.

[andriijas]

I always use array and use the slide value as array index to get my value. Works well.

[rained23]

This is what I need for, as example I use the slider for getting input of date, I know some will say use calendar, but in my condition I need to use slider because the UI are far more better because the value of selections are little.

Allowing us to specify or change the value I think will make it far more better.

[andriijas]

Sure @rained23 but the complexity gotta go somewhere, either its in noUiSlider or in your app. By just having an array/object that maps values from 0-n we can avoid such complexity

[leongersen]

var dates = ['21-06-2013','22-06-2013','23-06-2013','24-06-2013','25-06-2013','26-06-2013'];

$('#slider').noUiSlider({
   range: [0,5],
  ,start: 3
  ,handles: 1
  ,slide: function(){
     alert(dates[parseInt($(this).val())]);
  }
});

There you go! I see no reason to add this to the plugin, as this required just 2 lines of 'local' code.

[nickmccurdy]

@leongersen Thank you for the example code, it's working for me. However, this still makes the slider steps seem linear visually, and I think that custom steps would still be useful for the UI.

[leongersen]

I've decided to close the issue, as adding it to the plugin is likely to just miss everyone's exact requirements by a hair. This'll just require making other 'local' changes, and add an unnecessary layer of complexity. If you really, Really, Really, don't agree; feel free to comment again, and we'll talk some more :)

[reed1]

I would recommend this one:

http://loopj.com/jquery-simple-slider/

demo page: (look at Predefined List & Snap)

http://loopj.com/jquery-simple-slider/demo.html

Personally I don't think it's a waste to include this feature

[leongersen]

This feature is currently in active development, see issue #140.

[reed1]

Nice to hear !

[leongersen]

I answered from a smartphone last night, didn't get a chance to properly look at the example you provided. The 'Predefined List & Snap' functionality is currently available by mapping to an array. The feature discussed in #140 looks to be more advanced. I'll take more basic needs in consideration too, though.

[hotmeteor]

@leongersen Hey Leon. Not really clear on how to create the "Predefined List & Snap" functionality with v6. Our price dropdowns have irregular, unevenly spaced values and I would like to make the step option snap the slider to those values. Is this possible?

Example of our price values:

<select name="priceMin">
<option value="0">$0</option>
<option value="44900">$44,900</option>
<option value="59500">$59,500</option>
<option value="69900">$69,900</option>
<option value="79900">$79,900</option>
<option value="89900">$89,900</option>
<option value="99500">$99,500</option>
<option value="109000">$109,000</option>
<option value="114900">$114,900</option>
<option value="120000">$120,000</option>
<option value="129900">$129,900</option>
<option value="137500">$137,500</option>
<option value="144900">$144,900</option>
<option value="152500">$152,500</option>
<option value="159900">$159,900</option>
<option selected="selected" value="169900">$169,900</option>
<option value="180600">$180,600</option>
<option value="194900">$194,900</option>
<option value="208980">$208,980</option>
<option value="224500">$224,500</option>
<option value="239000">$239,000</option>
<option value="255000">$255,000</option>
<option value="279900">$279,900</option>
<option value="299900">$299,900</option>
<option value="329000">$329,000</option>
<option value="359900">$359,900</option>
<option value="399300">$399,300</option>
<option value="467380">$467,380</option>
<option value="595000">$595,000</option>
<option value="795000">$795,000</option>
</select>

[leongersen]

Yes: here you go:

http://jsfiddle.net/leongersen/SGVEv/

It uses the snap setting, which isn't in the documentation (yet), as it has no supporting unit tests.

[hotmeteor]

@leongersen This is fantastic! Thanks for taking the time to answer.

[nickmccurdy]

👍 🆒 🎊

[mg1075]

• fiddle was missing Link.js

http://jsfiddle.net/SGVEv/7/

[leongersen]

Actually, the fiddle was made before Link.js was split out.

[ChrisCinelli]

The jsfiddle does not work anymore. I tried to fix the link to the js and css but I cannot find the Link.js. Is this supposed to work?

[mg1075]

@ChrisCinelli
Hmmm, did the api change radically with the 8.0 release of the project? It has been a while since I looked at this plugin.

Maybe try this ad-hoc fiddle based on the new api:
http://jsfiddle.net/w3gbq126/

Apparently Link.js is part of the .min version of the plugin; or was Link.js altogether removed?
http://refreshless.com/nouislider/new-version/

[itisconor]

@mg1075
Looking at the ad-hoc fiddle you added here, is there a way to display percentage values that the values are attached to also?

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.