我试图用窄跟踪器和小拇指编码一个输入范围,但比跟踪器有更宽的可点击区域。
<div class="slider-wrapper">
<input type="range" orient="vertical" class="volume-slider"/>
</div>
例如,我有一个
div.slider-wrapper
输入范围的包装器,当我在包装器内单击时,输入值将更改。
jsfiddle
我查过了
rangeslider.js
和
jquery ui slider
.slider-wrapper{
background: rgba(0, 0, 0, 0.8);
width: 40px;
height: 100px;
position: relative;
left: 1px;
}
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
/*border: 1px solid white;*/
/*required for proper track sizing in FF*/
width: 80px;
transform: rotate(270deg);
position: relative;
left: -22px;
top: 37px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/*border-radius: 2px;*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
input[type=range]::-moz-range-track {
width: 80px;
height: 2px;
background: #61b4f7;
border: none;
/* border-radius: 3px; */
}
input[type=range]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 80px;
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #777;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #61b4f7;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #61b4f7;
}
input[type=range]:focus::-ms-fill-lower {
background: #888;
}
input[type=range]:focus::-ms-fill-upper {
background: #ccc;
}
<div class="slider-wrapper">
<input type="range" orient="vertical" class="volume-slider"/>
</div>
