Learning jQuery

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.