Removing the handle focus outline

Most browsers display a dotted or solid outline around an element when they receive the focus. This isn't part of the user interface style, but rather a built-in accessibility feature of the browser. This forced visual display around elements, such as the slider handle, isn't always desirable. Let's look at how we can go about removing this default browser behavior from the slider handle.

How to do it...

We can use any basic div element to base our sample slider widget on. So let's jump right to our custom slider widget CSS.

.ui-slider-handle-no-outline {
    outline: 0;
}

And, now we have our customized implementation of the slider widget and an instance of our customized slider.

(function( $, undefined ) {

$.widget( "ab.slider", $.ui.slider, {

    options: { 
        handleOutline: true
    },

    _create: function() {

        this._super();

        if ( this.options.handleOutline ) {
            return;
        }

        this.handles.addClass( "ui-slider...