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>
</div>

How to do it...

Here is the CSS used to customize the slider handle. This overrides values defined in the widget CSS, and so should be included...