1

Привет! Как добавить transition к ползунку в input range, и реально сделать это вообще? Меня интересует такое движение ползунка image Обратите внимание на окончание гифки, здесь видно, что ползунок в конце отпускают и тот возвращается на свое место (в соответствии с условием 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"

2 ответа 2

1

Решил сделать так: сначала находим нормализованое значение слайдера (0,...0.5...,1) для плавности я решил использовать cos нормализованого значения, затем используется простая линейная интерполяция для того что-бы понять положение на экране по x.

let slider = $('#slider');
$(document).ready(function(){
  $('.block').each(function(){
    $(this).css("top", $(window).height()*Math.random());
    $(this).attr("data-start", Math.random()*($(window).width()+400));
    $(this).attr("data-end", Math.random()*$(window).width());
    $(this).css("left", $(this).attr('data-start')+"px");
  });
});
slider.on('input', function(){
  let max = slider.prop('max');
  let value = slider.prop('value');
  let normalized = value/max;
  normalized = (Math.cos(normalized*3.14+3.14)+1)/2; //Для плавности
  $('.block').each(function(){
    $(this).css("left", $(this).attr('data-start')-normalized*$(this).attr('data-end')+"px");
  });
});
body
{
  overflow:hidden;
}
.block
{
  position: absolute;
  width: 50px;
  height: 50px;
  background: teal;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="0" min="0" max="100" id="slider">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

0

Используй событие input вместо change:

var inp = document.querySelector("input");


inp.addEventListener('input', function (e) {
  document.getElementById("input").textContent = e.target.value;
});

inp.addEventListener('change', function (e) {
  document.getElementById("change").textContent = e.target.value;
});
output { display: block; }
output:before { content: attr(id) ": "; }
<input type=range min=0 max=100>
<output id="input"></output>
<output id="change"></output>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.