Custom CSS to SliderExtender in ASP.NET

Question

I'm building web app using asp.net web forms and i have a SliderExtender in a TemplateField of a Grid View as below.

<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtbox_count"
    BoundControlID="txtbox_count_BoundControl" Orientation="Horizontal" EnableHandleAnimation="true"
    RailCssClass="SliderRail" HandleCssClass="SliderHandle" HandleImageUrl="~/Images/slider_h_handle.gif"
    Minimum="0" Maximum='<%# double.Parse(Eval("VEHICLE_TYPE.MAX_AMOUNT").ToString()) %>'>
</ajaxToolkit:SliderExtender>
<asp:TextBox ID="txtbox_count" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
    Style="text-align: right"></asp:TextBox>
<asp:TextBox ID="txtbox_count_BoundControl" Width="25" runat="server" Text='<%# Bind("VEHICLE_AVAILABILITY.EXIST_COUNT") %>'
    Style="text-align: right"></asp:TextBox>

CSS of RailCssClass and HandleCssClass

.SliderHandle
{
    position: absolute;
    height: 22px;
    width: 10px;
}
.SliderRail
{
    position: relative;
    background: url('../../Images/slider_h_rail.gif') repeat-x;
    height: 22px;
    width: 125px;
}

This looks like below.

But I need to customize the slider like below.

How can I do this? What should I change in my css class?

Answer 1

Here I have created example
Download sample from http://jqueryui.com/resources/download/jquery-ui-1.10.3.zip
include all necessory resource like jquery, CSS, images etc from demo into your project

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="WebForm2.aspx.cs" Inherits="TestSf.WebForm2" %>

    <%@ Register Src="SliderControl.ascx" TagName="SliderControl" TagPrefix="uc1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
        <asp:GridView runat="server" ID="grd" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="MaxValue" HeaderText="MaxValue" SortExpression="MaxValue" />
                <asp:TemplateField HeaderText="Slider">
                    <ItemTemplate>
                        <uc1:SliderControl ID="SliderControl1" runat="server" ctrlID='<%# Eval("ID") %>'
                            Maxvalue='<%# Eval("MaxValue") %>' Value='<%# Eval("Value") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <script type="text/javascript">
         if(arr.indexOf($(this).val())>-1)
          {
                alert('This is already selected , please select other option');
                return false;
          }
        </script>
    </asp:Content>

c# Sample code

public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            List<TestMax> lst = new List<TestMax>();
            lst.Add(new TestMax() { ID = 1, MaxValue = 10, Value = 4, Name = "Sandeep" });
            lst.Add(new TestMax() { ID = 2, MaxValue = 12, Value = 3, Name = "Nilesh" });
            lst.Add(new TestMax() { ID = 3, MaxValue = 11, Value = 6, Name = "Jayesh" });
            grd.DataSource = lst;
            grd.DataBind();
        }
    }
    public class TestMax
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int MaxValue { get; set; }

        public int Value { get; set; }
    }

Create a new USerControl and use this markup

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SliderControl.ascx.cs"
    Inherits="TestSf.SliderControl" %>
<script>
    $(function () {
        $("#slider-range-max<%= ctrlID %>").slider({ range: "max", min: 1, max: <%= Maxvalue %>,
            value: <%= Value %>, slide: function (event, ui) { $("#amount<%= ctrlID %>").val(ui.value); } 
        });
        $("#amount<%= ctrlID %>").val($("#slider-range-max<%= ctrlID %>").slider("value"));
    });
</script>
<div id="slider-range-max<%= ctrlID %>">
</div>
<input type="text" id="amount<%= ctrlID %>" style="border: 2; color: #f6931f; font-weight: bold;" />

UserControl C# code

 public partial class SliderControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public int ctrlID { get; set; }
        public int Maxvalue { get; set; }
        public int Value { get; set; }
    }