DHTMLSuite.slider

DHTML Suite - article index

Specifications

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.

Advertisement:
LudoJS framework
dhtmlchess.com
Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com