<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>