okey i have solved
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<style type="text/css">
.ajax__multi_slider_custom .handle-x-left
{
position: absolute;
background-color: rgb(210, 23, 172);
width: 15px;
height: 30px;
z-index: 200;
cursor: w-resize;
}
.ajax__multi_slider_custom .handle-x-right
{
position: absolute;
background-color: rgb(0, 23, 255);
width: 15px;
height: 30px;
z-index: 999999;
cursor: w-resize;
}
.ajax__multi_slider_custom
{
position: relative;
color:black;
background-color: rgb(10, 10, 10);
width: 170px;
height: 30px;
z-index: 100;
}
</style>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:TextBox ID="txtfrom" runat="server" Width="70" Text="0"></asp:TextBox>
<asp:TextBox ID="txtto" runat="server" Width="70" Text="200"></asp:TextBox>
<asp:MultiHandleSliderExtender ID="MultiHandleSliderExtender1" runat="server" BehaviorID="multiHandleSliderExtenderTwo"
ShowInnerRail="true" HandleAnimationDuration="0.1" TooltipText="{0}" TargetControlID="slider"
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>
</div>
</form>
</body>
</html>