Как и чем имитировать движение для input range?

Question

Задача такая, нужно чтобы input range или кастомный slider range был не видим, видна только кнопка, которая стоит неподвижна. Что я имею ввиду, есть картинка, есть кнопка, если зажать и двигать кнопку, то картинка уменьшается/увеличивается. Но для это мне нужен input range или кастомный, чтобы можно было имитировать движение. Подскажите советом, а то не знаю даже с чего начать.

Вот пример https://drive.google.com/open?id=1DwOy-xLbO2E1i-5ubJlX56dcxUdsxzKH

Answer 1

var range = $('input[type="range"]');
var ball = $('img');
var SpeedValue = function() {
  ball.css({
    'transform': 'scale(' + range.val() + ')'
  });
};
range.on('mousemove', SpeedValue);

.img {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
}

img {
  width: 150px;
  transition: all 1s;
  transform: scale(1);
  border: 1px solid navajowhite;
}

.slider {
  width: 150px;
  height: 25px;
  margin-bottom: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background-color: burlywood;
  border: 0.25rem solid chocolate;
  border-radius: 25px;
  cursor: pointer;
}

.img:before,
.img:after {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
}

.img:before {
  height: 100%;
  width: 33%;
  left: 33%;
  border-left: 1px solid navajowhite;
  border-right: 1px solid navajowhite;
}

.img:after {
  width: 100%;
  height: 33%;
  top: 33%;
  border-top: 1px solid navajowhite;
  border-bottom: 1px solid navajowhite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img" style="transform: scale(1);"><img src="https://cdn-nus-1.pinme.ru/tumb/600/photo/f9/95/f995cd4f052ccfb2d6280758086f5bf0.jpg" style="transform: scale(1);"></div>
<input min="1" max="5" name="points" type="range" value="0" class="slider" />

Имитация движения

var range = $('input[type="range"]');
var ball = $('img');
var SpeedValue = function() {
  ball.css({
    'transform': 'scale(' + range.val() + ')'
  });
};
range.on('mousemove', SpeedValue);

.img {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  margin-bottom: 5px;
}

img {
  width: 150px;
  transition: all 1s;
  transform: scale(1);
  border: 1px solid navajowhite;
}

span {
  z-index: -1;
  display: block;
  position: relative;
  width: 17px;
  height: 17px;
  background-color: burlywood;
  border: 0.25rem solid chocolate;
  border-radius: 25px;
  cursor: pointer;
  margin-top: -35px;
  margin-left: 2px;
  transform: scale(0.8);
  transition: all 1s;
}

.slider {
  width: 150px;
  height: 25px;
  margin-bottom: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  opacity: 0;
}

.slider:hover~span {
  transform: scale(1.2);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background-color: burlywood;
  border: 0.25rem solid chocolate;
  border-radius: 25px;
  cursor: pointer;
}

.img:before,
.img:after {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
}

.img:before {
  height: 100%;
  width: 33%;
  left: 33%;
  border-left: 1px solid navajowhite;
  border-right: 1px solid navajowhite;
}

.img:after {
  width: 100%;
  height: 33%;
  top: 33%;
  border-top: 1px solid navajowhite;
  border-bottom: 1px solid navajowhite;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img" style="transform: scale(1);"><img src="https://cdn-nus-1.pinme.ru/tumb/600/photo/f9/95/f995cd4f052ccfb2d6280758086f5bf0.jpg" style="transform: scale(1);"></div>
<input min="1" max="5" name="points" type="range" value="0" class="slider" />
<span></span>

БЛОГ НА HUSL

Как и чем имитировать движение для input range?

Ответы (1 шт):