O'Reilly logo

jQuery UI Cookbook by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Controlling the size of the slider handle

The slider handle used to control the position of the slider, dragged by the mouse, is a square shape. That is, the width is the same as the height, and we may want a different shape for the slider handle. In the case of a horizontal slider, the default orientation, let's look at how we can override widget CSS styles to alter the shape of the slider handle in order to meet the needs of our application.

Getting ready...

The HTML we'll create is for two slider widgets. We'll also give them a label and wrap them each with container div elements to control the layout.

<div class="slider-container"> <span>Treble:</span> <div id="treble"></div> </div> <div class="slider-container"> <span>Bass:</span> <div id="bass"></div> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required