Client-Side Change Range Slider Values

[Zach]

Hello,
I'm trying to dynamically change my slider's values based on what the user chooses from a radio button list.  For this example, we'll say my range starts at 500-600 with large ticks every 20 and small ticks every 4.  Initially this works fine.  When I change my values client side using AJAX, the new range is 1000-1200.  I'm using the following to change the values:

function pricesSuccess_method(results, userContext, methodName) {
                    var slider = $find('<%= uxPriceRangeSlider.ClientID %>');
                    slider.set_minimumValue(results[0]);
                    slider.set_maximumValue(results[results.length - 1]);
                    slider.set_selectionStart(results[0]);
                    slider.set_selectionEnd(results[results.length - 1]);
                    slider.set_smallChange((results[results.length - 1] - results[0]) / 25 > 1 ? (results[results.length - 1] - results[0]) / 25 : 1);
                    slider.set_largeChange((results[results.length - 1] - results[0]) / 5 > 1 ? (results[results.length - 1] - results[0]) / 5 : 1);
                    slider.Redraw();
                }

This again works fine.  However, when I change the radio button back to its original setting, the values become unreadable and there are a ton of ticks.  I investigated using FireBug and found that there are list items inside the containing UL of the slider going from 500 to 1200.  All of the values on the slider appear to be correct (min, max, selection start and end), but for some reason, its adding all these list items.  I've tried removing them through jQuery but they just show right back up.  Any ideas?

I've attached images below.  First is initial, second is after the first radio button change, and third is after going back to the intial state.

*Ahem* I tried to attach images, but they disappeared and do everytime I try to upload them.

[Tsvetie]

Hi Zach,
Due to some improvements in the slider, the control will behave as expected in this scenario as of Q1 2010. For the time being, the only solution I can offer you is the following:

<script type="text/javascript">
    function changeSliderProperties()
    {
        var slider = $find('<%= uxPriceRangeSlider.ClientID %>');
        slider._minimumValue = 1000;
        slider._maximumValue = 1200;
        slider._value = 1000;
        slider._selectionEnd = 1200;
        slider._smallChange = ((1200 - 1000) / 25 > 1 ? (1200 - 1000) / 25 : 1);
        slider._largeChange = ((1200 - 1000) / 5 > 1 ? (1200 - 1000) / 5 : 1);
        slider._handleInSlidingMode = null;

        slider.repaint(true);
    }

    function resetSliderProperties()
    {
        var slider = $find('<%= uxPriceRangeSlider.ClientID %>');
        slider._minimumValue = 500;
        slider._maximumValue = 600;
        slider._value = 500;
        slider._selectionEnd = 600;
        slider._smallChange = ((600 - 500) / 25 > 1 ? (600 - 500) / 25 : 1);
        slider._largeChange = ((600 - 500) / 5 > 1 ? (600 - 500) / 5 : 1);
        slider._handleInSlidingMode = null;

        slider.repaint(true);
    }
</script>

<telerik:RadSlider ID="uxPriceRangeSlider" runat="server" IsSelectionRangeEnabled="true"
    ItemType="Tick" MinimumValue="500" MaximumValue="600" LargeChange="20" SmallChange="4"
    Width="800px" Height="70px" TrackPosition="BottomRight" SelectionStart="500" SelectionEnd="600">
</telerik:RadSlider>
<button onclick="changeSliderProperties();return false;">
    Change</button>
<button onclick="resetSliderProperties();return false;">
    Reset</button>

Please note that the above solution uses internal fields and in case you decide to upgrade to Q1 2010 or later version, you will have to change the code back to use the setters, as the above might not work.

Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Zach]

Thanks, that solution almost works.  I had to add a timeout to the slider.repaint in order to make it work almost 100% of the time.  Some of the time it would just update with the same values.  250 ms seemed to be enough.