DHTMLX Docs & Samples Explorer

### Controlling Slider with API

Value: |
Minimum value: |
Maximum value: |
Step: |

Source

    <style>
       input{
       width:50px;
       }
       </style>
       <script>window.dhx_globalImgPath = "../../codebase/imgs/";</script>
    <script  src="../../codebase/dhtmlxcommon.js"></script>
    <script  src="../../codebase/dhtmlxslider.js"></script>
    <script  src="../../codebase/ext/dhtmlxslider_start.js"></script>
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxslider.css">

    <table><tr><td id="parentId"></td><td style="padding-left:20px"><input style="width:80px" type="button" value="Get value" onclick="alert(slider.getValue())"></td></tr></table>
    <br><br>
    <script>var slider = new dhtmlxSlider("parentId", 400);
    slider.init();</script>
    <table>
    <tr><td width="100">Value:</td><td width="70" align="right" ><input id="val" value="50" type="text"></td></tr>
    <tr><td>Minimum value:</td><td align="right"><input id="min" value="50" type="text"></td></tr>
    <tr><td>Maximum value:</td><td align="right"><input id="max" value="250" type="text"></td></tr>
    <tr><td>Step:</td><td align="right"><input id="step" value="10" type="text"></td></tr>
    <tr><td colspan="2" align="center"><input style="width:100px" type="button" value="Update scale" onclick=" updateScale();"></td></tr>
    </table>
    <script>function updateScale() {
        slider.setMin(document.getElementById("min").value);
        slider.setMax(document.getElementById("max").value);
        slider.setValue(document.getElementById("val").value);
        slider.setStep(document.getElementById("step").value);
    }</script>