I'm working on sliders with the jQuery sliders, I have a inout slider as

<form id="sliderData">
  <input id="slider1" type="range" min="0" max="50" step="">
</form>

I want the slider to set up to only some fixed values as [2,30,20,30,35,45]. So I cannot set up the step value. I have tried to fire the event by this code

$('form#sliderData').change(function () {
    alert("Hello");
});

This event is not even firing.Is there anyway to set slider to random values

I'm working on sliders with the jQuery sliders, I have a inout slider as

<form id="sliderData">
  <input id="slider1" type="range" min="0" max="50" step="">
</form>

I want the slider to set up to only some fixed values as [2,30,20,30,35,45]. So I cannot set up the step value. I have tried to fire the event by this code

$('form#sliderData').change(function () {
    alert("Hello");
});

This event is not even firing.Is there anyway to set slider to random values

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow asked Apr 5, 2016 at 10:42 ha chittiha chitti 13922 silver badges1212 bronze badges 2

• Values are not even in order! – Rayon Commented Apr 5, 2016 at 10:48
• 2 @RayonDabre that was actually his question - he want random step values! – michaPau Commented Apr 5, 2016 at 11:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The event is not being fired because you need to hook the change event to the slider control itself, not it's parent form.

The problem you have is that you cannot specify specific steps in a slider control. They must all be the same step apart from the min to the max values. To solve this you could instead make the values of the slider match the indexes of the values in your JS array, and have a label showing the actual option chosen. Something like this:

var values = [2, 30, 20, 30, 35, 45];
$('#slider1').on('input', e => $('span').text(values[e.target.value]));

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="sliderData">
  <input id="slider1" type="range" min="0" max="5" value="0">
  <span>2</span>
</form>