rangeslider-pure #28

Example fiddle. Use it as a template for issues or for test purpose

by Stryzhevskyi

HTML

<script src="https://cdn.jsdelivr.net/npm/rangeslider-pure@latest/dist/range-slider.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rangeslider-pure@latest/dist/range-slider.css">
<!--Bug report template-->
<h1>Slider:</h1>
<input type="range" id="rangeslider" />
<button id="clear">Clear log</button>
<pre id="output"></pre>

SCSS

pre {
  font-size: 8px;
}

button {
  margin-top: 10px;
}


.rangeSlider {
  .rangeSlider__handle {
    .tooltip {
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid #707070;
      border-radius: 3px;
      background-color: #e4e4e4;
      padding: 4px;
      display: block;
    }
  }
}

JavaScript 1.7

const tooltip = document.createElement('div')
const slider = document.querySelectorAll('input[type="range"]');
const output = document.querySelector('#output');
const clearButton = document.querySelector('#clear');

const createTooltip = (rangeSlider) => {
  const handleEl = rangeSlider.handle;

  tooltip.classList.add('tooltip');
  handleEl.appendChild(tooltip);
  tooltip.textContent = rangeSlider.value;
};

const logEvents = (eventName, ...args) => {
  console.log.apply(console, args);
  output.textContent = eventName + ': ' + args.join(', ') + '\n' + output.textContent;
};

const initializeSlider = () => {
  return rangeSlider.create(slider, {
    onSlide: (value, percent, position) => {
      logEvents('progress', value);

      tooltip.textContent = value;
      if (value > 50) {
        slider[0].rangeSlider.update({
          value: 50
        }, true);
      }
    }
  });
};

clearButton.addEventListener('click', () => {
  output.textContent = '';
});
initializeSlider();
createTooltip(slider[0].rangeSlider);