137 lines
4.6 KiB
CSS
137 lines
4.6 KiB
CSS
.btnSlider {
|
|
font-size: 14px;
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.btnSlider ~ label:before {
|
|
content: var(--val);
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type='range'] {
|
|
-webkit-appearance: none;
|
|
--val: 0;
|
|
--pos: calc(1em + .01*var(--val)*(100% - 2em));
|
|
margin: 0;
|
|
width: 100px;
|
|
|
|
background: linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%) /*none*/;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-runnable-track {
|
|
border: none;
|
|
display: inline-block;
|
|
margin-bottom: -4px;
|
|
position: relative;
|
|
border-radius: 14px;
|
|
height: 30px;
|
|
|
|
|
|
background: #a5a5a5;
|
|
-webkit-background-clip: padding-box;
|
|
-webkit-background-origin: padding-box;
|
|
/* -webkit-background-image: -webkit-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);*/
|
|
background: linear-gradient(top, rgb(138,138,138) 0%, rgb(140,140,140) 14%, rgb(159,159,159) 72%, rgb(164,164,164) 100%);
|
|
box-shadow: inset 0 5px 10px 0 rgba(0, 0, 0, 0.2), inset 0 -2px 5px 0 rgba(255, 255, 255, 0.2);
|
|
|
|
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
|
|
-webkit-transition: all 0.5s ease-in;
|
|
transition: all 0.5s ease-in;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.js input[type='range']::-webkit-slider-runnable-track {
|
|
background-image: -webkit-linear-gradient(#8DAD33, #BDDD36);
|
|
background-repeat: no-repeat;
|
|
background-size: var(--pos);
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-thumb {
|
|
-webkit-box-sizing: border-box;
|
|
|
|
border: solid 0.5em transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
|
|
/* box-shadow: inset 0 -3px 3px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.4), 0 2px 0 0 rgba(0, 0, 0, 0.2);*/
|
|
|
|
background: -webkit-linear-gradient(#f9f9f9, #e6e6e6) padding-box,
|
|
radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box,
|
|
-webkit-linear-gradient(#f9f9f9, #e6e6e6) border-box;
|
|
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
input[type='range']::-moz-range-track, input[type='range']::-moz-range-thumb, input[type='range'] {
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
input[type='range']::-moz-range-track {
|
|
border: none;
|
|
height: 30px;
|
|
display: inline-block;
|
|
margin-bottom: -9px;
|
|
position: relative;
|
|
border-radius: 14px;
|
|
|
|
line-height: normal;
|
|
font-style: normal;
|
|
color: #fff;
|
|
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
|
|
font-weight: bold;
|
|
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
background: #a4a4a4;
|
|
background: -moz-linear-gradient(top, rgba(138,138,138,1) 0%, rgba(140,140,140,1) 14%, rgba(159,159,159,1) 72%, rgba(164,164,164,1) 100%);
|
|
|
|
box-shadow: inset 0 2px 5px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
|
|
-moz-transition: all 0.5s ease-in;
|
|
transition: all 0.5s ease-in;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.js input[type='range']::-moz-range-track {
|
|
background-image: -moz-linear-gradient(#8DAD33, #BDDD36);
|
|
background-image: linear-gradient(#8DAD33, #BDDD36);
|
|
background-repeat: no-repeat;
|
|
background-size: var(--pos);
|
|
}
|
|
|
|
input[type='range']::-moz-range-progress {
|
|
}
|
|
|
|
input[type='range']::-moz-range-thumb {
|
|
-moz-box-sizing: border-box;
|
|
border: solid 0.5em transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 1px 1px #a0a0a0, inset 0 1px 2px #b0b0b0;
|
|
background: -moz-linear-gradient(#f9f9f9, #e6e6e6) padding-box,
|
|
-moz-radial-gradient(circle at 50% calc(50% + 1px), #fff calc(0.5em - 1px), rgba(255, 255, 255, 0) calc(0.5em + 2px)) border-box,
|
|
-moz-linear-gradient(#f9f9f9, #e6e6e6) border-box;
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
input[type='range']::-ms-track {
|
|
}
|
|
|
|
input[type='range']::-ms-fill-lower {
|
|
}
|
|
input[type='range']::-ms-thumb {
|
|
}
|
|
|