Range selection in slider

Range selection in slider

Hi all,
I have multiple slider handles, say 4, sh1, sh2, sh3, sh4. These 4 values i get from four text boxes. I want them to be stable, so i used disabled: true. Now my question is how to highlight the range between sh2 and sh3 sliders. I used range: true option, but now only two slide handlers are appearing i want all 4 of them to appear, but the range between sh2 and sh3 should be highlighted, say in different color. How to do this?

Following is the code. Here i have taken only 2 slide handler values, lowervalue is taken as 75 and upper value is $("#text1").val() which is the value that is entered in the textbox. Now if i use more values those are not appearing since range is set to true. Also tell how to highlight the range between 75 and $("#text1").val() with a specific color. Please help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link type="text/css" href="../../themes/base/
jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <style type="text/css">
        #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script type="text/javascript">
    $(function() {
        fun1();
        $("#button1").click(function(){fun1()});
        function fun1(){
        $("#slider-range").slider({
            disabled: true,
            range: true,
            min: 0,
            max: 500,
            values: [75, $("#text1").val()],
            slide: function(event, ui) {
                $("#slider-range").val('$' + ui.values[0] + ' - $' + ui.values[1]);               
            }
        });

        }
    });
    </script>
</head>
<body>

<div class="demo">


<div id="slider-range"></div>
<input type="text" id="text1" value="370" >
<input type="button" id="button1">
</div><!-- End demo -->

<div class="demo-description">

<p>Set the <code>range</code> option to true to capture a range of values with two drag handles.  The space between the handles is filled with a different background color to indicate those values are selected.</p>

</div><!-- End demo-description -->

</body>
</html>