Question

So I’m implementing a the Jquery UI slider on my page. The value of the slider bar is fed in as a parameter to a sql datasource. On a button click, the parameter is fed into the datasource and the gridview on the screen rebinds. The problem is that I would like the scrollbar to maintain its position so that users know what value was fed in as a parameter for the gridview they are currently viewing.

Here is my code for the scrollbar:

 <!--Slider bar for investment-->

 <div style="float:right;">
 <script type = "text/javascript">

     $(function () {
         $("#slider").slider({
             value: 100,
             min: 1,
             max: 200,
             step: 1,
             slide: function (event, ui) {                     
                 $("#hiddenInvestment").val(ui.value);
             }
         });
         $("#hiddenInvestment").val($("#slider").slider("value"));
     });        
    </script>

<div class="demo">
<p>
<asp:label runat="server" id="amountlabel" >Investment:    
</asp:label>    
<input name="hiddenInvestment" id="hiddenInvestment" />
<asp:Label runat="server" ID="percentlabel">%</asp:Label>
</p>
<div id="Div1"></div>
</div>
<div class="demo" style="width:100px;">
<div id="slider"></div>
</div>

The line that I assume I need to alter is the ‘value: 100’, but I’m not sure what I need to change it to. Any suggestions?

Answer 1

You can have a hidden field on the page. Before you submit the form for postback set this hidden field with slider value. On page load when you initialize the slider read the initial value from this hidden field. Try this

$(function () {
     $("#slider").slider({
         value: ($('#sliderVale').val() || 100),
         min: 1,
         max: 200,
         step: 1,
         slide: function (event, ui) {                     
             $("#hiddenInvestment").val(ui.value);
         }
     });
     $("#hiddenInvestment").val($("#slider").slider("value"));
 }); 


 $('form').submit(function(){
     $('#sliderVale').val($("#slider").slider("value"));
 });