Change thumb style of jQuery UI slider control

In my previous post, I had posted about jQuery UI Slider control.
1. Implement jQuery UI slider with ASP.NET
2. How to change jQuery UI Slider value from textbox in ASP.NET

In this post, I will show you how easily you can change the slider control's thumb. Thumb allows us to increment or decrement the value of slider. By default it looks like this.



The thumb of slider control is pretty broad and it's height is also less. See below picture. The thumb looks really nice.



The good thing about jQuery is if you know the things then you can modify it very easily as per your requirement. To achieve this, we need to modify some css classes and we are done. Find the below css classes in jQuery.ui.css file.
.ui-slider-horizontal .ui-slider-handle {
  margin-left:-0.6em;
  top:-0.3em;
}
.ui-slider .ui-slider-handle {
  cursor:default;
  height:1.2em;
  position:absolute;
  width:1.2em;
  z-index:2;
}
Now,just change the value of "margin-left","top","height" and "width" attribute to new value that are defined in below css code.
.ui-slider-horizontal .ui-slider-handle {
  margin-left:-0.2em;
  top:-0.6em;
}
.ui-slider .ui-slider-handle {
  cursor:default;
  height:2em;
  position:absolute;
  width:0.8em;
  z-index:2;
}
Really cool and simple to implement.You can modify it as per your need.

Feel free to contact me for any help related to jQuery. I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..