jquery UI slider with a range that starts at a specific value

Question

It's probably easier if I just show an example of what I want to do. I found a demo at http://fiddle.jshell.net/g33ky/DxK5m/3/show/light/

In short, I want the a color range to appear from a specific value (e.g. middle of the slider bar) to the current selected sliderbar position. As far as I can tell, jquery-ui's range option for sliders only support ranges from the min and max values of the slider bar.

I believe the demo above is actually changing the code for jquery slider. I don't mind doing that, but I cannot get it to work properly outside of jsfiddle. I've tried saving the code directly from using view source and it will still only on jsfiddle. I would really appreciate it if someone can tell me how to make the code from the above demo work outside of jsfiddle, or if someone can show me how to get a slider to do the same thing using jquery or pure javascript. Thanks in advance. I've pulled so much hair out over this, my scalp hurts!

Answer 1

Maybe I'm misunderstanding your question, but you can set the position of the slider handle by setting it's "value" property.

$("#slider").slider({
  value: 30,
  ... other properties ...
}  

Answer 2

<div data-role="fieldcontain" class="sliderContend_h" style="padding-top:10px;">

 <input type="range" name="slider-2" id="slider-2" value="15" min="15" max="25"  class="slider_h" data-highlight="true" />

                     </div>

Answer 3

Thanks for the answers posted. I figured out a way to do it after all. If anyone else is looking to do the same thing, I was able to modify Dragdealer (available at http://code.ovidiu.ch/dragdealer/) to achieve the effect I wanted.