html范围选择器,HTML5 金属感滑块范围选择器

html范围选择器,HTML5 金属感滑块范围选择器

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

background: url(.png), radial-gradient(#49586b, #091521);

background-blend-mode: multiply;

}

html[class*='-ms-'] {

background: radial-gradient(#49586b, #091521);

}

html[class*='-ms-']:before {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

opacity: 0.3;

background: url(.png);

content: '';

}

input[type='range'] {

box-sizing: border-box;

overflow: visible;

position: absolute;

-webkit-appearance: none;

top: 50%;

left: 50%;

width: 20em;

height: 1.25em;

padding: 0 0.5em;

border-radius: 0.625em;

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

box-shadow: inset 0 -1px 1px #9daabb, inset 0 1px 0.125em #0f1110;

/* Firefox & Chrome/ Opera need this,

otherwise font-size is smaller */

background: linear-gradient(to right top, #474747, #202020);

font-size: 1em;

/* wish I could style this asshole */

cursor: pointer;

}

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

-webkit-appearance: none;

/* fix Firefox WTF */

z-index: -1;

/* because IE */

border: none;

/* because IE & Chrome/ Opera */

height: 2px;

border-radius: 1px;

transform: translateY(-1px);

box-shadow: 0 2px #111;

background: #4c4c4c;

}

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

background-image: linear-gradient(90deg, #ff0, #ff1493);

background-repeat: no-repeat;

background-size: 75% 100%;

}

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

-webkit-appearance: none;

/* weird shit, Chrome */

margin-top: -0.5em;

z-index: 1;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

transform: rotate(35deg);

background: linear-gradient(-45deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 0, linear-gradient(45deg, #ddd, rgba(221, 221, 221, 0) 65%), linear-gradient(-135deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 100%, linear-gradient(135deg, #ddd, rgba(221, 221, 221, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 0, linear-gradient(45deg, rgba(221, 221, 221, 0) 35%, #ddd), linear-gradient(-135deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 100%, linear-gradient(135deg, rgba(221, 221, 221, 0) 35%, #ddd) 0 100% #696969;

background-repeat: no-repeat;

background-size: 50% 50%;

/* fix Chrome/ Opera */

background-size: 56% 56%;

}

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

/* fix Firefox WTF */

z-index: -1;

/* because IE */

border: none;

/* because IE & Chrome/ Opera */

height: 2px;

border-radius: 1px;

transform: translateY(-1px);

box-shadow: 0 2px #111;

background: #4c4c4c;

}

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

background-image: linear-gradient(90deg, #ff0, #ff1493);

background-repeat: no-repeat;

background-size: 75% 100%;

}

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

z-index: 1;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

transform: rotate(35deg);

background: linear-gradient(-45deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 0, linear-gradient(45deg, #ddd, rgba(221, 221, 221, 0) 65%), linear-gradient(-135deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 100%, linear-gradient(135deg, #ddd, rgba(221, 221, 221, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 0, linear-gradient(45deg, rgba(221, 221, 221, 0) 35%, #ddd), linear-gradient(-135deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 100%, linear-gradient(135deg, rgba(221, 221, 221, 0) 35%, #ddd) 0 100% #696969;

background-repeat: no-repeat;

/* Firefox-only, it won't work in IE

and it's messed up in Chrome */

background-size: 50% 50%;

cursor: ew-resize;

}

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

/* fix Firefox WTF */

z-index: -1;

/* because IE */

border: none;

/* because IE & Chrome/ Opera */

height: 2px;

border-radius: 1px;

transform: translateY(-1px);

box-shadow: 0 2px #111;

background: #4c4c4c;

color: transparent;

}

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

z-index: 1;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

transform: rotate(35deg);

background: linear-gradient(-45deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 0, linear-gradient(45deg, #ddd, rgba(221, 221, 221, 0) 65%), linear-gradient(-135deg, #ddd, rgba(221, 221, 221, 0) 65%) 100% 100%, linear-gradient(135deg, #ddd, rgba(221, 221, 221, 0) 65%) 0 100%, linear-gradient(-45deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 0, linear-gradient(45deg, rgba(221, 221, 221, 0) 35%, #ddd), linear-gradient(-135deg, rgba(221, 221, 221, 0) 35%, #ddd) 100% 100%, linear-gradient(135deg, rgba(221, 221, 221, 0) 35%, #ddd) 0 100% #696969;

background-repeat: no-repeat;

background-size: 50% 50%;

}

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

background: linear-gradient(90deg, #ff0, #ff1493);

}

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

background: transparent;

}

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

display: none;

}

input[type='range']:focus {

outline: none;

box-shadow: inset 0 -1px 1px #9daabb, inset 0 1px 0.125em #0f1110, 0 0 1em cyan;

}

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

box-shadow: inset 0 -1px 1px #9daabb, inset 0 1px 0.125em #0f1110, 0 0 1em cyan;

}

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

position: absolute;

left: 100%;

margin-left: 1.5em;

padding: 0 0.5em;

width: 3em;

height: 1.66667em;

border-radius: 0.83333em;

box-shadow: inset 0 -1px 1px #9daabb, inset 0 1px 0.125em #0f1110;

background: linear-gradient(to right top, #474747, #202020);

font: 0.75em / 1.66667em verdana, sans-serif;

text-align: right;

content: "75%";

}