Simple-Slider

by danchitnis

HTML

<script src="https://unpkg.com/@ungap/event-target"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@danchitnis/simple-slider/dist/slider.css">

<div id="outerContainer">
  <div id="slider"></div>
</div>

<p>Current Value: <span id="value"></span></p>
<p>Final Value: <span id="value-final"></span></p>

CSS

body {
  background-color: rgb(10, 10, 10);
  color: rgb(245, 245, 245);
  font-family: Arial, Helvetica, sans-serif;
}

JavaScript

import {SimpleSlider} from 'https://cdn.skypack.dev/@danchitnis/simple-slider';

const pValue = document.getElementById("value");
const pValueFinal = document.getElementById("value-final");

const slider = new SimpleSlider("slider", 0, 100, 0);

slider.callBackUpdate = () => {
  pValue.innerHTML = slider.value.toPrecision(4) + "%";
};

slider.callBackDragEnd = () => {
  pValueFinal.innerHTML = slider.value.toPrecision(4) + "%";
};

window.addEventListener("resize", () => {
  slider.resize();
})