DHTMLSuite.slider
Specifications
- Widget/Class name: DHTMLSuite.slider
- Demo: demo-slider-1.html.
- Css: [THEMES_FOLDER]/css/slider.css
Configuration
The slider widget inserts a horizontal or vertical slider into a HTML element on your page.
Simple example:
<div id="redSlider"></div>
<div id="valueOfRedSlider" class="sliderInputDiv">
<input type="text" size="3" name="red" value="30" onchange="setSliderValue(this.value)">
</div>
<SCRIPT type="text/javascript">
var sliderObj = new DHTMLSuite.slider();
sliderObj.setSliderTarget('redSlider');
sliderObj.setSliderName('red');
sliderObj.setOnChangeEvent('setFormFieldValue');
sliderObj.setInitialValue(30);
sliderObj.setSliderMaxValue(255);
sliderObj.setSliderReversed();
sliderObj.init();
</SCRIPT>
This code will insert a slider into the HTML tag with id "redSlider", example <DIV id="redSlider"></DIV>. When changes are made to the slider, the function with name setFormFieldValue will be called (specified by the setOnChangeEvent method). Arguments to this function will be the value of the slider and the name of the slider (set by the setSliderName method).
This function may look like this:
function setFormFieldValue(value,nameOfSlider)
{
document.forms[0].elements[nameOfSlider].value = value;
}
So when you move the slider, this function will be called. It will update the text input with name "red" with the value of the slider.
As you can see from the HTML code above, a function called setSliderValue is called when you change the value of the text input "red". This is done in order to synchronize the slider with with the text input.
This function looks like this:
function setSliderValue(whichEl,newValue){
sliderObj.setSliderValue(newValue);
}
It simply call the setSliderValue method which will update the arrow position on the slider.
