Question

I’m using this jQuery slider:

http://api.jqueryui.com/slider/

I use it’s change event to slide it.
I have a updatepanel on my page. And when I move my slider, I want to change values (shown on labels) in the updatepanel.

So is it possible to fire async postback to update the updatepanel on change event of the slider? I’m new to jQuery. So please help.

<asp:Button ID="btnRefresh" runat="server" Text="Refresh"
                            OnClick="btnRefresh_Click" />
<div id="slider" runat="server"></div>
....
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnRefresh" />
                            </Triggers>
                            <ContentTemplate>
                                <fieldset id="fldMain" runat="server">
                                    <asp:Panel ID="Panel1" runat="server" Width="100%" >
                                        <asp:PlaceHolder ID="phMain" runat="server" ></asp:PlaceHolder>
                                    </asp:Panel>
                                </fieldset>
                            </ContentTemplate>
                        </asp:UpdatePanel>

Update:

I tried with __doPostBack('UpdatePanel1', ''); in change event of slider. But full postback is happening.

I’m putting the labels in placeholder phMain.

Answer 1

You need to bind the slide-event of the this widget.

$(function() {
    $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 10,
        value: 2,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});