html5范围选择,HTML5 一款精致的范围输入控件(带数值提示标签)

CSS

语言：

CSSSCSS

确定

html {

background: #e7e7e7;

}

input[type='range'] {

position: absolute;

top: 50%;

left: 50%;

padding: 0;

width: 21em;

border-radius: 1.5em;

transform: translate(-50%, -50%);

background: transparent;

/* slider components */

/* slider states */

font-sixe: 1em;

cursor: pointer;

}

input[type='range'],

input[type='range']::-webkit-slider-runnable-track,

input[type='range']::-webkit-slider-thumb {

-webkit-appearance: none;

}

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

box-sizing: border-box;

border: none;

padding: 0.5em;

width: 21em;

height: 1.5em;

border-radius: 1.5em;

box-shadow: inset 0 0.125em 0.125em #bbb, inset 0 -1px 0.125em #fff;

background: linear-gradient(#aaa, #cbcbcb 10%, #e1e1e1 90%, #fff) content-box, linear-gradient(#dad8dd, #eee);

}

.js input[type='range']::-webkit-slider-runnable-track {

background: linear-gradient(#b05c44 1px, #fa895f 1px, #b05b46) no-repeat content-box, linear-gradient(#aaa, #cbcbcb 10%, #e1e1e1 90%, #fff) content-box, linear-gradient(#dad8dd, #eee);

background-size: 65% 100%, 100% 100%, 100% 100%;

}

.js input[type='range']::-webkit-slider-runnable-track {

background-position: 0 1px, 0 0, 0 0;

}

input[type='range']::-moz-range-track {

box-sizing: border-box;

border: none;

padding: 0.5em;

width: 21em;

height: 1.5em;

border-radius: 1.5em;

box-shadow: inset 0 0.125em 0.125em #bbb, inset 0 -1px 0.125em #fff;

background: linear-gradient(#aaa, #cbcbcb 10%, #e1e1e1 90%, #fff) content-box, linear-gradient(#dad8dd, #eee);

}

.js input[type='range']::-moz-range-track {

background: linear-gradient(#b05c44 1px, #fa895f 1px, #b05b46) no-repeat content-box, linear-gradient(#aaa, #cbcbcb 10%, #e1e1e1 90%, #fff) content-box, linear-gradient(#dad8dd, #eee);

background-size: 65% 100%, 100% 100%, 100% 100%;

}

input[type='range']::-ms-track {

box-sizing: border-box;

border: none;

padding: 0.5em;

width: 21em;

height: 1.5em;

border-radius: 1.5em;

box-shadow: inset 0 0.125em 0.125em #bbb, inset 0 -1px 0.125em #fff;

background: linear-gradient(#aaa, #cbcbcb 10%, #e1e1e1 90%, #fff) content-box, linear-gradient(#dad8dd, #eee);

color: transparent;

}

input[type='range']::-ms-fill-lower {

border-radius: 0.75em;

background: linear-gradient(#b05c44 1px, #fa895f 1px, #b05b46) no-repeat content-box;

}

input[type='range']::-webkit-slider-thumb {

margin-top: -0.4375em;

border: none;

width: 1.375em;

height: 1.375em;

border-radius: 50%;

box-shadow: inset -0.125em -0.25em 0.25em #c5c5c5, inset 0 0 0 0.45833em #f1eaf2, inset 1px 1px 0.125em 0.45833em #767175, inset -1px -1px 0.125em 0.45833em #fcfcfc;

background: #bbc7c7;

cursor: ew-resize;

}

input[type='range']::-moz-range-thumb {

border: none;

width: 1.375em;

height: 1.375em;

border-radius: 50%;

box-shadow: inset -0.125em -0.25em 0.25em #c5c5c5, inset 0 0 0 0.45833em #f1eaf2, inset 1px 1px 0.125em 0.45833em #767175, inset -1px -1px 0.125em 0.45833em #fcfcfc;

background: #bbc7c7;

cursor: ew-resize;

}

input[type='range']::-ms-thumb {

border: none;

width: 1.375em;

height: 1.375em;

border-radius: 50%;

box-shadow: inset -0.125em -0.25em 0.25em #c5c5c5, inset 0 0 0 0.45833em #f1eaf2, inset 1px 1px 0.125em 0.45833em #767175, inset -1px -1px 0.125em 0.45833em #fcfcfc;

background: #bbc7c7;

cursor: ew-resize;

}

.js input[type='range'] /deep/ #thumb {

position: relative;

}

.js input[type='range'] /deep/ #thumb:before,

.js input[type='range'] /deep/ #thumb:after {

position: absolute;

left: 50%;

}

.js input[type='range'] /deep/ #thumb:before {

padding: 0 0.5em;

border-radius: 0.25em;

transform: translate(-50%, -2.75em);

box-shadow: 0.125em 0.125em 0.25em #bbb;

background: linear-gradient(#fcfcfc, #e2e2e2);

color: #6a6a6a;

font: 900 1em/2 trebuchet ms, verdana, arial, sans-serif;

text-shadow: 0 1px #fff;

content: '65%';

}

.js input[type='range'] /deep/ #thumb:after {

width: 0.6875em;

height: 0.6875em;

transform: translate(-50%, -1.20313em) rotate(45deg);

box-shadow: 0.125em 0.125em 0.125em #bbb;

background: linear-gradient(-45deg, #ddd, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%);

content: '';

}

input[type='range']:focus {

outline: none;

box-shadow: 0 0 0.25em red;

}