Привет!
Как добавить transition к ползунку в input range, и реально сделать это вообще?
Меня интересует такое движение ползунка
Обратите внимание на окончание гифки, здесь видно, что ползунок в конце отпускают и тот возвращается на свое место (в соответствии с условием js).
Мой код codepan
var sliderChange = document.querySelector('input[type=range');
sliderChange.onchange = function() {
sliderChangeStyle();
sliderChangeFunc();
};
// trigger input start
var event = new CustomEvent('input'); // create event
sliderChange.dispatchEvent(event); // trigger event
sliderChange.addEventListener('input', function(e) {
sliderChangeStyle();
sliderChangeFunc();
}, false);
// trigger input end
// styles func
function sliderChangeStyle() {
var value = sliderChange.value,
min = sliderChange.getAttribute('min'),
max = sliderChange.getAttribute('max');
sliderChange.style.backgroundSize = (value - min) * 100 / (max - min) + '%' + ' 100%';
};
// styles
//motion slide start
var slideFirst = document.getElementById('slideItemFirst'),
slideSecond = document.getElementById('slideItemSecond'),
slideThird = document.getElementById('slideItemThird');
function sliderChangeFunc() {
var value = sliderChange.value;
var defaultVal = 0,
shift = 1024;
if (value < 25) {
console.log('value < 25');
} else if (value > 25 && value < 50) {
console.log('value > 25 && value < 50');
} else if (value >= 50 && value < 100) {
console.log('value >= 50 && value < 100');
} else {
console.log('else');
}
};
input[type=range] {
-webkit-appearance: none;
outline: none;
height: 15px;
width: 690px;
background-color: rgba(0, 0, 0, .7);
background-image: linear-gradient(green, green);
background-size: 0% 100%;
background-repeat: no-repeat;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
outline: none;
box-sizing: content-box;
background-image: url(http://s1.iconbird.com/ico/2013/9/449/w256h2561380452221DriveNetwork.png);
background-repeat: no-repeat;
background-size: contain;
left: -20px;
bottom: 0px;
position: relative;
width: 50px;
height: 70px;
margin: 0 10px;
transition: all 1s;
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: transparent;
margin-right: -30px;
}
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<input id="sliderInput" type="range" min="0" max="100" value="0"