Reverse the slider

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Reverse the slider

abhijeet_thomas
Can you help me reverse this slider. I need minimum value 2000 at top
and maximum value 10000 at bottom.. I am not able to achieve that.

<body style="font-size:80%;">
                <script type="text/javascript">
        $(function() {
                $("#slider-range").slider({
                        range: true,
                        orientation: "vertical",
                        step: 500,
                        min: 2000,
                        max: 10000,
                        values: [2000, 10000],
                        slide: function(event, ui) {
                                $("#amount").val(ui.values[0]);
                                $("#amount1").val(ui.values[1]);
                        }
                });
                $("#amount1").val($("#slider-range").slider("values", 1 ));
                $("#amount").val($("#slider-range").slider("values", 0));
        });
        </script>
<div class="demo">
<div class="value">
<ul>
<li><label for="amount1">To $:</label><input type="text" id="amount" /
></li>
<li><label for="amount">From $:</label><input type="text"
id="amount1" /></li>
</ul>
</div>
<br><br>
<div id="slider-range"></div>

--
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email].
To unsubscribe from this group, send email to [hidden email].
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Reply | Threaded
Open this post in threaded view
|

Re: Reverse the slider

Gus Waddell-3
Hi Abyss,

There may be a better way - but this seems to work for me:

$(function() {
     var minVal = 2000;
     var maxVal = 10000;

     $("#slider-range").slider({
         range: true,
         orientation: "vertical",
         step: 500,
         min: minVal,
         max: maxVal,
         values: [minVal, maxVal],
         slide: function(event, ui) {
             $("#amount").val(  (minVal+maxVal) - ui.values[1] );
             $("#amount1").val( (minVal+maxVal) - ui.values[0] );
         }
     });
     $("#amount1").val($("#slider-range").slider("values",1));
     $("#amount").val($("#slider-range").slider("values", 0));

});


Cheers,
Gus



On 26/04/2010 7:37 PM, Abyss wrote:

> Can you help me reverse this slider. I need minimum value 2000 at top
> and maximum value 10000 at bottom.. I am not able to achieve that.
>
> <body style="font-size:80%;">
> <script type="text/javascript">
> $(function() {
> $("#slider-range").slider({
> range: true,
> orientation: "vertical",
> step: 500,
> min: 2000,
> max: 10000,
> values: [2000, 10000],
> slide: function(event, ui) {
> $("#amount").val(ui.values[0]);
> $("#amount1").val(ui.values[1]);
> }
> });
> $("#amount1").val($("#slider-range").slider("values", 1 ));
> $("#amount").val($("#slider-range").slider("values", 0));
> });
> </script>
> <div class="demo">
> <div class="value">
> <ul>
> <li><label for="amount1">To $:</label><input type="text" id="amount" /
>    
>> </li>
>>      
> <li><label for="amount"> From $:</label><input type="text"
> id="amount1" /></li>
> </ul>
> </div>
> <br><br>
> <div id="slider-range"></div>
>
>    

--
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email].
To unsubscribe from this group, send email to [hidden email].
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.