locked
ajaxToolkit:MultiHandleSliderExtender displaying selected range in a different color. RRS feed

  • Question

  • User-891471100 posted

    Hello,

    I have managed to alter the slider rail and handles appearance using RailCssClass and HandleCssClass but is there any way to highlight the selected range. I have seen jquery slider controls which do it but i want to use the  MultiHandleSlider itself.

    InnerRailCss will have the selected portion go white but I need it be highlighted in a bright color.

    Friday, March 15, 2013 5:58 AM

Answers

  • User78336405 posted

    Hi,

    May be you can change the color dynamically with valueChanged event. You can use that as follow:

     function pageLoad(sender, e) {
            $find("SliderExtender1").set_Value(100);
            $find("SliderExtender2").add_valueChanged(function() {            
            if (Number(document.getElementById("TextBox4").value) > 100)
            $find("SliderExtender2").set_Value(50);            
            });
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 17, 2013 10:28 PM
  • User-891471100 posted

    I found the answer for anyone who may require the same solution :

    Create css classes as:

    .ajax__multi_slider_custom .outer_rail_horizontal

    {           position: relative;

    width:inherit;

    height:5px;

    background-color:rgb(206,206,206);

    z-index: 100;

    }

    .ajax__multi_slider_custom .inner_rail_horizontal

    {   position:absolute;

    background-color:Orange;

    width:inherit;

    height:5px;

    z-index:100;

    }

    Then just apply the CssClass="ajax__multi_slider_custom" to multihandlesliderextender
    Thank you 4 your replies once again.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2013 2:59 AM

All replies

  • User582086724 posted

    Hi..

    Refer the below link to use multhandle slider extender by applying railcss and Handle css

    http://www.dotnetcode.in/2011/11/using-ajax-multihandleslider-extender.html

    Friday, March 15, 2013 1:32 PM
  • User78336405 posted

    Hi,

    May be you can change the color dynamically with valueChanged event. You can use that as follow:

     function pageLoad(sender, e) {
            $find("SliderExtender1").set_Value(100);
            $find("SliderExtender2").add_valueChanged(function() {            
            if (Number(document.getElementById("TextBox4").value) > 100)
            $find("SliderExtender2").set_Value(50);            
            });
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, March 17, 2013 10:28 PM
  • User555306248 posted

    Please refer to sample in this thread about how to set a CustomBackaround image to the Slider control: http://forums.asp.net/p/1517988/3647619.aspx#3647619

    Sunday, March 17, 2013 11:17 PM
  • User-891471100 posted

    Thank you for your replies but i still cant highlight the selected region I want to know if using InnerRailStyle I can apply my own css class to highlight the selected region. But it takes only 2 values "AsIs" and "SlidingDoors".

    Monday, March 18, 2013 12:40 AM
  • User-891471100 posted

    I found the answer for anyone who may require the same solution :

    Create css classes as:

    .ajax__multi_slider_custom .outer_rail_horizontal

    {           position: relative;

    width:inherit;

    height:5px;

    background-color:rgb(206,206,206);

    z-index: 100;

    }

    .ajax__multi_slider_custom .inner_rail_horizontal

    {   position:absolute;

    background-color:Orange;

    width:inherit;

    height:5px;

    z-index:100;

    }

    Then just apply the CssClass="ajax__multi_slider_custom" to multihandlesliderextender
    Thank you 4 your replies once again.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 18, 2013 2:59 AM
  • User1596443631 posted

    Hello, I try to do this but do not understand how you could you tell me how I assign the inner and outer Css, I have this code please thanks

    .cc1_multi_slider_custom .outer_rail_horizontal {
                ;
                width: inherit;
                height: 25px;
                background-color: green;
                z-index: 100;
            }
    
     .cc1_multi_slider_custom .inner_rail_horizontal {
                ;
                background-color: Orange;
                width: inherit;
                height: 5px;
                z-index: 100;
            }

    and 

    <table>
                            <tr>
                               
                                <td>
    
                                    <asp:TextBox ID="txtH1" runat="server" Text="25"  Style="display:none;"/>
                                    <asp:TextBox ID="txtH2" runat="server" Text="75"  Style="display:none;"  />
                                </td>
                                <td style="height:25px;" valign="top" >
                                    
                                     <asp:TextBox ID="txtMS" runat="server" Style="display:none;" Width="100%" />
                                    <cc1:MultiHandleSliderExtender ID="multiSliderExtenderFour" runat="server"
                                         BehaviorID="multiSliderExtenderFour"
                                        TargetControlID="txtMS"
                                        CssClass="cc1_multi_slider_custom"
                                      
                                        Minimum="0"
                                        Maximum="1000"
                                        Length="1000"
                                       EnableHandleAnimation="true"
                                        EnableInnerRangeDrag="true"
                                        ShowHandleHoverStyle="true"
                                        ShowHandleDragStyle="true"
                                         ShowInnerRail="false"
                                   
                                         InnerRailStyle="SlidingDoors"
                                        Steps="20"
                                        Increment="4"
                                        >
                                        
                                        <MultiHandleSliderTargets>
                                            <cc1:MultiHandleSliderTarget 
                                                ControlID="txtH1" 
                                                 Offset="6"
                                              HandleCssClass="handle-x-right"
                                                />
                                            <cc1:MultiHandleSliderTarget
                                                ControlID="txtH2"
                                                Offset="-6" 
                                               HandleCssClass="handle-x-left"
                                            />
                                        </MultiHandleSliderTargets>
                                    </cc1:MultiHandleSliderExtender>
                                    
                                    <br />
                                </td>
                              
                            </tr>
    
                        </table>

    Thursday, January 9, 2014 7:03 PM