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

First use following code to stop showing the default image

.handleStyle img
{
    display:none;
}

Then use whatever styles you are using for handle like following

.handleStyle
{
    position: absolute;
    height: 22px;
    width: 22px;
    background-color:Red;
    border-radius:8px;
}

Answer 2

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; }
    }

Answer 3

First thing, You are using AjaxControlToolkit slider while, expecting UI as jquery slider. if you can switch the control, it will solve your issue.

otherwise,

put these css classes

.ajax__slider_h_rail {
    border: 1px solid;
    border-radius: 3px 3px 3px 3px;
    height: 8px;
    position: relative;
}
.ajax__slider_h_handle {
    height: 22px;
    position: absolute;
    top: -7px !important;
    width: 10px;
}

Answer 4

You can apply styles using the following properties.

RailCssClass="ajax__slider_h_rail"

HandleCssClass="ajax__slider_h_handle"

and their styles as follows, which you can edit according to your requirements.

.ajax__slider_h_rail 
{
    position:relative;
    height:20px;

}
.ajax__slider_h_handle 
{

position:absolute;
    height:20px;width:10px;

}
.ajax__slider_v_rail 
{

position:relative;
    width:20px;

}
.ajax__slider_v_handle 
{

position:absolute;
    height:10px;width:20px;

}