HTML5+CSS3 Create a compatible browser range input Object

With the release of IE10, our ability to create styles for range input has been dramatically improved. It is possible to implement Cross-browser-compatible range input (sliders) with pure CSS. In this tutorial, we use the basic range input as an example:

And then turn it into:

To simplify the process of generating cross-browser-compatible styles, we introduced less. Of course, there are CSS versions.

Add Base CSS Style

We need to add several styles to the range input to override the default appearance of all browsers.

Input[type=range] {
-webkit-appearance:none; * Hides the slider so custom slider can is made * *
width:100%; /* Specific width is required for Firefox. */
}

Input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
}

Input[type=range]:focus {
Outline:none; /* Removes the blue border. You are should probably do some kind the focus styling for accessibility reasons. */
}

Input[type=range]::-ms-track {
width:100%;
Cursor:pointer;
Background:transparent; /* Hides the slider so custom styles can is added * *
Border-color:transparent;
Color:transparent;
}

We created a range input that is not visible or has no style in all browsers. Now we can add the basic style.

Add a style to the slider

The group that was clicked or dragged along the track is called the slider. It can be added like a regular HTML element.

/ * Special Styling for Webkit/blink * * inputselector ">[type=range] pseudo ">::-webkit-slider-thumb  { -webkit-appearance: none;    Border: 1px solid #000000;    height: px;    width: px;    Border-radius: 3px;    background: #ffffff;    cursor: pointer;    margin-top: -px;   * need to specify a margin in Chrome, but in Firefox and IE it is automatic * *  Box-shadow: 1px 1px 1px #000000, 0px 0 px 1px #0d0d0d;   / * ADD cool effects to your sliders! * * }  * All-same stuff for Firefox * * input[Type=range]::-moz-range-thumb { Box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;    Border: 1px solid #000000;    height: px;    width: px;    Border-radius: 3px;    background: #ffffff;    cursor: pointer;   }  * The same stuff for IE * * input[Type=range]::-ms-thumb { Box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;    Border: 1px solid #000000;    height: px;    width: px;    Border-radius: 3px;    background: #ffffff;    cursor: pointer;   }

Note that here we repeat the code several times, which is necessary because you cannot separate this type of selector with commas. The browser discards the selector as long as it doesn't understand a part of the selector.

We got the following look:

Add a style to the track

The horizontal line that the slider moves is called the track. It can also be added like a regular HTML element.

Tips in IE: there are slightly different ways to add styles to range input in ie10+. In IE, you can add a completely different style to the upper half (the right side of the slider) and the lower half (the left of the slider).

Another thing to keep in mind is that you should focus on the trajectory, and it will change as the user interacts with range.

input[Type=range]::-webkit-slider-runnable-track { width: %;    height: 8.4px;    cursor: pointer;    Box-shadow: 1px 1px 1px #000000, 0px 0 px 1px #0d0d0d;    background: #3071a9;    Border-radius: 1.3px;    Border: 0.2px solid #010101;   }  input[Type=range]: Focus::-webkit-slider-runnable-track {  background: #367ebd;   }  input[Type=range]::-moz-range-track { width: %;    height: 8.4px;    cursor: pointer;    Box-shadow: 1px 1px 1px #000000, 0px 0 px 1px #0d0d0d;    background: #3071a9;    Border-radius: 1.3px;    Border: 0.2px solid #010101;   }  input[Type=range]::-ms-track { width: %;    height: 8.4px;    cursor: pointer;    background: transparent;    border-color: transparent;    border-width:  0px;    color: transparent;   } input[Type=range]::-ms-fill-lower { background: #2a6495;    Border: 0.2px solid #010101;    Border-radius: 2.6px;    Box-shadow: 1px 1px 1px #000000, 0 PX 0px 1px #0d0d0d;   } input[Type=range]: Focus::-ms-fill-lower {  background: #3071a9;   } input[Type=range]::-ms-fill-upper { background: #3071a9;    Border: 0.2px solid #010101;    Border-radius: 2.6px;    Box-shadow: 1px 1px 1px #000000, 0 PX 0px 1px #0d0d0d;   } input[Type=range]: Focus::-ms-fill-upper {  background: #367ebd;   }

The above code lets us get:

Build a complete range input

Now that we have built the slider and track, we can combine the CSS to complete a full range input.

Cross-browser range input full CSS code

The complete CSS code for the cross-browser range input is as follows.

Input[type=range] {


-webkit-appearance:none;


MARGIN:18PX 0;


width:100%;


}


Input[type=range]:focus {


Outline:none;


}


Input[type=range]::-webkit-slider-runnable-track {


width:100%;


height:8.4px;


Cursor:pointer;


Animate:0.2s;


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


Background: #3071a9;


border-radius:1.3px;


border:0.2px solid #010101;


}


Input[type=range]::-webkit-slider-thumb {


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


border:1px solid #000000;


height:36px;


width:16px;


border-radius:3px;


Background: #ffffff;


Cursor:pointer;


-webkit-appearance:none;


Margin-top: -14px;


}


Input[type=range]:focus::-webkit-slider-runnable-track {


Background: #367ebd;


}


Input[type=range]::-moz-range-track {


width:100%;


height:8.4px;


Cursor:pointer;


Animate:0.2s;


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


Background: #3071a9;


border-radius:1.3px;


border:0.2px solid #010101;


}


Input[type=range]::-moz-range-thumb {


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


border:1px solid #000000;


height:36px;


width:16px;


border-radius:3px;


Background: #ffffff;


Cursor:pointer;


}


Input[type=range]::-ms-track {


width:100%;


height:8.4px;


Cursor:pointer;


Animate:0.2s;


Background:transparent;


Border-color:transparent;


BORDER-WIDTH:16PX 0;


Color:transparent;


}


Input[type=range]::-ms-fill-lower {


Background: #2a6495;


border:0.2px solid #010101;


border-radius:2.6px;


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


}


Input[type=range]::-ms-fill-upper {


Background: #3071a9;


border:0.2px solid #010101;


border-radius:2.6px;


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


}


Input[type=range]::-ms-thumb {


box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;


border:1px solid #000000;


height:36px;


width:16px;


border-radius:3px;


Background: #ffffff;


Cursor:pointer;


}


Input[type=range]:focus::-ms-fill-lower {


Background: #3071a9;


}


Input[type=range]:focus::-ms-fill-upper {


Background: #367ebd;


}

Completed range input

The input boxes that you get when you add these styles are as follows:

Add: cross-browser range input complete less code

Creating the same range input for each browser requires a lot of CSS code. Use a preprocessor to generate results more efficiently. The following is the less file that generated the CSS code above.

@track-color: #424242;
@thumb-color: #555bc8;

@thumb-radius:8px;
@thumb-height:30px;
@thumb-width:30px;
@thumb-shadow-size:1px;
@thumb-shadow-blur:1px;
@thumb-shadow-color: #111;
@thumb-border-width:1px;
@thumb-border-color:white;

@track-width:100%;
@track-height:10px;
@track-shadow-size:2px;
@track-shadow-blur:2px;
@track-shadow-color: #222;
@track-border-width:1px;
@track-border-color:black;

@track-radius:5px;
@contrast: 5%;

. Shadow (@shadow-size, @shadow-blur, @shadow-color) {
Box-shadow: @shadow-size @shadow-size @shadow-blur @shadow-color, 0px 0px @shadow-size lighten (@shadow-color,5%);
}

. Track () {
Width: @track-width;
Height: @track-height;
Cursor:pointer;
Animate:0.2s;
}

. Thumb () {
. Shadow (@thumb-shadow-size, @thumb-shadow-blur, @thumb-shadow-color);
border: @thumb-border-width solid @thumb-border-color;
Height: @thumb-height;
Width: @thumb-width;
Border-radius: @thumb-radius;
Background: @thumb-color;
Cursor:pointer;
}

Input[type=range] {
-webkit-appearance:none;
Margin: @thumb-HEIGHT/2 0;
Width: @track-width;

&:focus {
Outline:none;
}

&::-webkit-slider-runnable-track {
. Track ();
. Shadow (@track-shadow-size, @track-shadow-blur, @track-shadow-color);
Background: @track-color;
Border-radius: @track-radius;
border: @track-border-width solid @track-border-color;
}

&::-webkit-slider-thumb {
. Thumb ();
-webkit-appearance:none;
Margin-top: (-@track-border-width * 2 + @track-height)/2)-(@thumb-HEIGHT/2);
}

&:focus::-webkit-slider-runnable-track {
Background:lighten (@track-color, @contrast);
}

&::-moz-range-track {
. Track ();
. Shadow (@track-shadow-size, @track-shadow-blur, @track-shadow-color);
Background: @track-color;
Border-radius: @track-radius;
border: @track-border-width solid @track-border-color;
}
&::-moz-range-thumb {
. Thumb ();
}

  &::-ms-track {
    track ();
    background:transparent;
    border-color:transparent;
    border-width: @thumb-width 0;
    color:transparent;
 }

  &::-ms-fill-lower {
    background:darken (@track-color, @contrast);
     border: @track-border-width solid @track-border-color;
    Border-radius: @track-radius*2;
    Shadow (@track-shadow-size, @track-shadow-blur, @track-shadow-color);
 }
  &::-ms-fill-upper {
    background: @track-color;
    border: @ Track-border-width solid @track-border-color;
    Border-radius: @track-radius*2;
    Shadow (@track-shadow-size, @track-shadow-blur, @track-shadow-color);
 }
  &::-ms-thumb {
   . Thumb ();
 }
  &:focus::-ms-fill-lower {
    background: @track-color;
 }
  &:focus::-ms-fill-upper {
    background:lighten (@track-color, @contrast);
 }
}

Browser Support

Range input has its own browser support as follows: Firefox 23+, Safari 4+, IOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+. Very good compatibility. The traditional style scheme of adding styles should match well if you follow the code in this article.

This is a screenshot of the demo in more than one current version of the browser.

If the browser does not support range input, it relies on a valid text input box that behaves as an input function.

Working with tools

Implementing a Cross-browser range input style is not feasible until 2014, and there are not many tools to generate styles. Range.css is a useful tool for generating range input styles.

According to Daniel Stern's "styling Cross-browser compatible Range inputs with CSS" in the article, the entire translation with our own understanding and thought, if the translation is not good or wrong place also please peer friends pointing. If you want to reprint this translation, you need to indicate the source of English: http://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/.