how to add/change css for MultiHandleSliderExtender

-
In this Article i will explian how to add css for MultiHandleSliderExtender

step1-add ajaxtoolkit manager in page.

   <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>

step2-add  MultiHandleSliderExtender in page.

<div>
     <asp:TextBox ID="txtfrom" runat="server" Width="70" Text="0"></asp:TextBox>
        <asp:TextBox ID="txtto" runat="server" Width="70" Text="200"></asp:TextBox>
        <br /><br />
        <asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" ShowHandleDragStyle="true" runat="server"  BehaviorID="multiHandleSliderExtenderTwo"
            ShowInnerRail="true" HandleAnimationDuration="0.1" TooltipText="{0}" TargetControlID="slider" InnerRailStyle="SlidingDoors"
            CssClass="ajax__multi_slider_custom" RaiseChangeOnlyOnMouseUp="true" Minimum="0"
            Maximum="100">
            <MultiHandleSliderTargets>
                <asp:MultiHandleSliderTarget ControlID="txtfrom" HandleCssClass="handle-x-left" />
                <asp:MultiHandleSliderTarget ControlID="txtto" HandleCssClass="handle-x-right" />
            </MultiHandleSliderTargets>
        </asp:MultiHandleSliderExtender>
        <asp:TextBox ID="slider" runat="server"></asp:TextBox>
    </div>

step2- change default css properties of MultiHandleSliderExtender within <head></head>

<style type="text/css">
/*----------Price Slider start------------*/

.ajax__multi_slider_custom .outer_rail_horizontal {
    position: absolute;
    background-color: black;
     
}

.ajax__multi_slider_custom .handle-x-left
        {
            position: absolute;
           
            background-color: #038f94;
            cursor:pointer;
            width: 15px;
             height: 20px;
            z-index: 200;
border:none;
           top:-5px !important;
        }
        .ajax__multi_slider_custom .handle-x-right
        {
                position: absolute;
       
            cursor:pointer;
           
  background-color: #038f94;
            width: 15px;
            height: 20px;
            z-index: 999999;
border:none;
top:-5px !important;
       
        }
        .ajax__multi_slider_custom
        {
       
            position: relative;
            color:black;
           background:#fb6400;

           width:200px;
             height: 10px;
            z-index: 100;

   }
#mCSB_1_container span {
    color: #038f94;
    display: inline-block;
    font-weight: bold;
    padding: 0 15px;
    padding-left: 2px;
    width: 54px;
}

/*----------Price Slider  end------------*/
    </style>



overall source code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="CookiesAddToCart.WebForm2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
/*----------Price Slider start------------*/

.ajax__multi_slider_custom .outer_rail_horizontal {
    position: absolute;
    background-color: black;
     
}

.ajax__multi_slider_custom .handle-x-left
        {
            position: absolute;
           
            background-color: #038f94;
            cursor:pointer;
            width: 15px;
             height: 20px;
            z-index: 200;
border:none;
           top:-5px !important;
        }
        .ajax__multi_slider_custom .handle-x-right
        {
                position: absolute;
       
            cursor:pointer;
           
  background-color: #038f94;
            width: 15px;
            height: 20px;
            z-index: 999999;
border:none;
top:-5px !important;
       
        }
        .ajax__multi_slider_custom
        {
       
            position: relative;
            color:black;
           background:#fb6400;

           width:200px;
             height: 10px;
            z-index: 100;

   }
#mCSB_1_container span {
    color: #038f94;
    display: inline-block;
    font-weight: bold;
    padding: 0 15px;
    padding-left: 2px;
    width: 54px;
}

/*----------Price Slider  end------------*/
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <div>
     <asp:TextBox ID="txtfrom" runat="server" Width="70" Text="0"></asp:TextBox>
        <asp:TextBox ID="txtto" runat="server" Width="70" Text="200"></asp:TextBox>
        <br /><br />
        <asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" ShowHandleDragStyle="true" runat="server"  BehaviorID="multiHandleSliderExtenderTwo"
            ShowInnerRail="true" HandleAnimationDuration="0.1" TooltipText="{0}" TargetControlID="slider" InnerRailStyle="SlidingDoors"
            CssClass="ajax__multi_slider_custom" RaiseChangeOnlyOnMouseUp="true" Minimum="0"
            Maximum="100">
            <MultiHandleSliderTargets>
                <asp:MultiHandleSliderTarget ControlID="txtfrom" HandleCssClass="handle-x-left" />
                <asp:MultiHandleSliderTarget ControlID="txtto" HandleCssClass="handle-x-right" />
            </MultiHandleSliderTargets>
        </asp:MultiHandleSliderExtender>
        <asp:TextBox ID="slider" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>








Comments

Post a Comment

Popular posts from this blog

Dynamic Mega Menu With Asp.Net with c#,java script and Sql Server.

-
Image
Introduction: In this article you’ll see how to Create dynamic  Mega Menu in asp.net .Having a menu and sub menus with links is very normal in a Web application. Typically, we create static menu and menu items. But sometimes we need dynamic mega menu when we do not know what the menu names and links will be called. Mega menus are a growing trend in web design . For sites that involve a lot of pages and/or products, a mega menu may be able to improve navigation and usability. Dynamic Mega Menu with ASP.NET, C#, jQuery and SQL Server solution that I would like to share with others puzzled with the same as was one of my website development i was having a tough time creating a Mega menu from database. Step1  Database:  I have 4 table category,subcategory  subcategory2 and  Brand  GO /****** Object:  Table [dbo].[tbl_Category]    Script Date: 07/30/2015 08:03:43 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON ...
Read more

Bootstrap Modal Popup keep open on PostBack in ASP.Net

-
In This tutorial will show you how keep open Bootstrap Modal Popup when Postback in asp.net I have added one button inside  bootstrap model. in some requirement we need to save data and get some output on popup after button click in model popup . source code- <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div class="container"> <div class="row"> <h1> Hello, world! Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min....
Read more

Export div content to PDF Using ITextSharp in asp.net

-
Image
In this short article I will explain how to export content in a div to a PDF using ITextSharp  in ASP.Net. Step1: ITextSharp is a free and open source assembly that helps to convert page output or HTML content in a PDF file.Download it first from given link  and add dll file in bin folder- https://sourceforge.net/projects/itextsharp/files/itextsharp/ Step2 -add Page <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Studentdetails.aspx.cs" Inherits="Studentdetails" EnableEventValidation = "false" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title> </head> <body>     <form id="form1" runat="server">   <div id="studentdetails" runat=...
Read more