Слайдер с ползунком на чистом js

428

09 апреля 2019, 06:40

Подскажите, пожалуйста, по слайдеру с ползунком несколько вопросов.

https://codepen.io/Galtran/pen/YRWbqM?editors=0010

'use strict';
// slider.js
(function () {
  window.slider = function (bar, thumb) {
    // var output = document.querySelector('#output1');
    var moveThumb = function (evt) {
      var THUMB_WIDTH = thumb.offsetWidth;
      var LimitMovementX = {
        min: bar.offsetLeft,
        max: bar.offsetLeft + bar.offsetWidth - THUMB_WIDTH
      }
      var thumbCoord = thumb.offsetLeft + evt.movementX;
      // var value = thumbCoord * 100 / LimitMovementX.max ^ 0;
      if (thumbCoord < LimitMovementX.min) {
        thumbCoord = LimitMovementX.min;
      } else if (thumbCoord > LimitMovementX.max) {
        thumbCoord = LimitMovementX.max;
      }
      thumb.style.left = thumbCoord + 'px';
      // output.textContent = value;
    };
    var onThumbMousedown = function () {
      var onDocumentMousemove = function (evt) {
        moveThumb(evt);
      };
      var onThumbMouseup = function () {
        document.removeEventListener('mousemove', onDocumentMousemove);
        thumb.removeEventListener('mouseup', onThumbMouseup);
      };
      document.addEventListener('mousemove', onDocumentMousemove);
      thumb.addEventListener('mouseup', onThumbMouseup);
    };
    thumb.addEventListener('mousedown', onThumbMousedown);
  };
}());
// main.js
(function () {
  var bar1 = document.querySelector('#bar1'),
    thumb1 = document.querySelector('#thumb1'),
    bar2 = document.querySelector('#bar2'),
    thumb2 = document.querySelector('#thumb2');
  window.slider(bar1, thumb1);
  window.slider(bar2, thumb2);
})();

В slider.js закомментированы 3 строчки. Они выводят положение в % от 0 до 100 на первый слайдер. Пока не знаю, как сделать, чтобы в main.js возвращалось значение(value) для каждого ползунка отдельно.
Иногда ползунок прилипает к курсору, даже когда кнопка мыши отпущена. "Отлипает" только после повторного нажатия на ползунок.

Answer 1

'use strict'; 
// slider.js 
(function() { 
  window.slider = function(oSlider, nMin, nMax) { 
    let bar = oSlider.querySelector('.slider__bar'), 
      thumb = oSlider.querySelector('.slider__toggle'), 
      output = oSlider.querySelector('.slider__output'); 
    output.textContent = nMin; 
    let LimitMovementX, thumbCoord; 
 
    function moveThumb(e) { 
      LimitMovementX = { 
        min: bar.offsetLeft, 
        max: bar.offsetLeft + bar.offsetWidth - thumb.offsetWidth 
      } 
      thumbCoord = thumb.offsetLeft + e.movementX; 
 
      if (thumbCoord < LimitMovementX.min) { 
        thumbCoord = LimitMovementX.min; 
      } 
      if (thumbCoord > LimitMovementX.max) { 
        thumbCoord = LimitMovementX.max; 
      } 
      output.textContent = nMin + thumbCoord * (nMax - nMin) / LimitMovementX.max ^ 0; 
      thumb.style.left = thumbCoord + 'px'; 
    }; 
 
    function onThumbMouseup() { 
      document.removeEventListener('mousemove', moveThumb); 
      document.removeEventListener('mouseup', onThumbMouseup); 
    }; 
    thumb.addEventListener('mousedown', function() { 
      this.addEventListener('dragstart', function(e) { 
        e.preventDefault(); 
      }); 
      document.addEventListener('mousemove', moveThumb); 
      document.addEventListener('mouseup', onThumbMouseup); 
    }); 
  }; 
}()); 
 
// main.js 
(function() { 
  window.slider(document.querySelector('#slider1'), 1, 100); 
  window.slider(document.querySelector('#slider2'), 2, 12); 
})();

.wrapper { 
  display: flex; 
  padding: 20px; 
  outline: 1px solid black; 
} 
 
.slider { 
  position: relative; 
  width: 500px; 
  margin: 0 auto; 
  padding: 15px 0; 
  outline: 1px solid red; 
  user-select: none; 
} 
 
.slider__bar { 
  width: 100%; 
  height: 2px; 
  background-color: gray; 
} 
 
.slider__toggle { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 32px; 
  height: 32px; 
  background-color: lightblue; 
  border-radius: 50%; 
  cursor: pointer; 
}

<div class="wrapper"> 
  <div class="slider" id="slider1"> 
    <div class="slider__bar"></div> 
    <div class="slider__toggle"></div> 
    <p class="slider__content">Сумма: <span id="output1" class="slider__output"></span> млн. &#8381;</p> 
  </div> 
  <div class="slider" id="slider2"> 
    <div class="slider__bar"></div> 
    <div class="slider__toggle"></div> 
    <p class="slider__content">Срок: <span id="output2" class="slider__output"></span> мес.</p> 
  </div> 
</div>