Mr.Happy Mr.Happy - 28 days ago 8
Javascript Question

How to set jslider default pointers programmatically on page load

I am using jQuery Slider plugin script here is my HTML & JQuery code.

HTML:

<div class="main">
<input id="slider" type="slider" name="price" value="20;50" />
</div>


jQuery:

jQuery("#slider").slider({
from: 10,
to: 100,
step: 10,
round: 1,
skin: 'plastic',
limits: true,
onstatechange: function (value) {
console.log(value)
},
});


Now my question is, I don't want to use range value inside as textbox value like below:

<input id="slider" type="slider" name="price" value="20;50" />


Is it possible to load 20;50 value with Jslider script?

My jsFiddle: http://jsfiddle.net/1gpqzaw6/1/

Any idea or suggestion?

Thanks.

Answer

Instead of calling the slider with

jQuery("#slider").slider({ 
    ...

Try to call it like

jQuery("#slider").val("30;50").slider({
    ...

This way you can remove the value attribute from the <input> tag and set the value programmatically before initiating the slider.