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.

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.