Monday, August 25, 2014

MultiHandle Slider with tooltip using Ajaxtoolkit

Hi Guys, Today I am going to demonstrate Multihandle Slider with tooltip using Ajaxtoolkit.






 <script type="text/javascript">  
     function setHandlerTooltip() {  
       var handleBarFrom = document.getElementById("multiHandleSliderOne_handle_0");  
       var handleBarTo = document.getElementById("multiHandleSliderOne_handle_1");  
       if (handleBarFrom != null) {  
         handleBarFrom.setAttribute("title", "Credit From");  
       }  
       if (handleBarTo != null) {  
         handleBarTo.setAttribute("title", "Credit To");  
       }  
     }  
   </script>  
 <table>  
     <tr>  
       <td align="left">  
         Credit Range:  
       </td>  
       <td colspan="3">  
         <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>  
         <ajax:multihandlesliderextender id="MultiHandleSliderExtender1" runat="server" targetcontrolid="txtSlider"  
           onclientload="setHandlerTooltip" tooltiptext="{0}" behaviorid="multiHandleSliderOne"  
           minimum="0" maximum="25" increment="1" length="370">  
         <MultiHandleSliderTargets>  
              <ajax:MultiHandleSliderTarget Decimals="2" ControlID="ctl00_MainContent_txtRangeFrom" />  
              <ajax:MultiHandleSliderTarget Decimals="2" ControlID="ctl00_MainContent_txtRangeTo" />  
         </MultiHandleSliderTargets>  
         </ajax:multihandlesliderextender>  
       </td>  
     </tr>  
     <tr>  
       <td colspan="4">  
         <table style="margin-left: 105px;">  
           <tr>  
             <td>  
               From:  
             </td>  
             <td style="width: 34%;">  
               <asp:TextBox ID="txtRangeFrom" MaxLength="6" Width="60" runat="server"></asp:TextBox>  
             </td>  
             <td>  
               To:  
             </td>  
             <td>  
               <asp:TextBox ID="txtRangeTo" Text="20" MaxLength="6" Width="60" runat="server"></asp:TextBox>  
             </td>  
           </tr>  
         </table>  
       </td>  
     </tr>  
   </table>