<div id="example">
  <h1>Custom Slider Element</h1>
  <strong>Create slider element with HTML, CSS and Javascript</strong>
  
  <div id="slider-1" class="slider" data-value="25" slider>
    <div class="fill"></div>
    <div class="handle"></div>
  </div>

  <div id="slider-2" class="slider custom-style-1" data-value="70" slider>
    <div class="fill"></div>
    <div class="handle"></div>
  </div>

  <div id="slider-3" class="slider custom-style-2" data-value="50" slider>
    <div class="fill"></div>
    <div class="handle"></div>
  </div>

  <div id="slider-4" class="slider custom-style-3" data-value="80" slider>
    <div class="fill"></div>
    <div class="handle"></div>
  </div>
  
  <small>More in skriper.dev</small>
</div>

:root {
  --height: 10px;
  --background: #dedede;
  --border-radius: 10px;
  --handle--background: #dedede;
  --fill-color: #00ccff;
}
.slider {
  position: relative;
  width: 100%;
  height: var(--height);
  border-radius: var(--border-radius);
  background: var(--background);
  display: flex;
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.slider .fill {
  position: absolute;
  width: 0;
  height: var(--height);
  left: 0;
  top: 0px;
  border-radius: var(--border-radius);
  background: var(--fill-color);
  box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.slider .handle {
  position: relative;
  width: calc(var(--height) * 2);
  height: calc(var(--height) * 2);
  left: 0;
  top: calc(var(--height) / 2 * -1);
  border-radius: var(--border-radius);
  background: var(--handle--background);
  border: 4px solid #fff;
  cursor: pointer;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.slider .handle:active {
  border: 5px solid #fff;
}
/* Example style */
* {
  box-sizing: border-box;
}
body {
  background-color: #eee;
  font-family: "Poppins", sans-serif;
}
#example {
  margin: auto;
  width: 100%;
  max-width: 300px;
}
#example h1 {
  font-size: 30px;
  line-height: 36px;
  padding-top: 50px;
}
#example strong {
  padding-bottom: 20px;
  display: block;
}
#example small {
  padding-top: 40px;
  display: block;
  opacity: 0.5;
}
#example .slider {
  margin-top: 20px;
}
/* Style 1 */
.custom-style-1 .fill {
  background: linear-gradient(116deg, #346875 0%, #c1e846 100%);
}

/* Style 2 */
.custom-style-2 .fill {
  background: linear-gradient(130deg, #def142 0%, #e2bb5a 48%, #e68572 100%);
}

/* Style 3*/
.custom-style-3 .fill {
  background: linear-gradient(244deg, #da43f5 0%, #ea308c 48%, #f91c23 100%);
}

function makeSlider(elm) {
  let slider, sliderRect, fill, handle, hadnleRect
  // Init elements
  getElements(elm)

  function getElements(elm) {
    slider = typeof elm === "string" ? document.querySelector(elm) : elm
    sliderRect = slider.getBoundingClientRect()

    fill = slider.querySelector(".fill")

    handle = slider.querySelector(".handle")
    hadnleRect = handle.getBoundingClientRect()
  }

  // Fix size and position onResize
  window.addEventListener("resize", function () {
    getElements(elm)
  })

  handle.onmousedown = function () {
    document.addEventListener("mousedown", moveStart)
    document.addEventListener("mousemove", moving)
  }
  handle.ontouchstart = function () {
    document.addEventListener("touchmove", moving, {
      passive: false,
    })
    document.addEventListener("touchend", unbindEventListeners)
    document.addEventListener("touchcancel", unbindEventListeners)
  }

  /* Set position function */
  function setPosition(position) {
    const fix = (hadnleRect.width * 100) / sliderRect.width / 2

    // Set position handle and fill
    handle.style.left = `${position - fix}%`

    // Set position handle and fill
    handle.style.left = `${position - fix}%`
    fill.style.width = `${position}%`
    // Custom event for watch change
    const ev = new CustomEvent("onchange", { detail: { value: position } })
    slider.dispatchEvent(ev)
    slider.dataset.value = position
  }
  function unbindEventListeners() {
    document.removeEventListener("mousedown", moving)
    document.removeEventListener("mousemove", moving)
    document.removeEventListener("mouseup", moving)
    document.removeEventListener("touchmove", moving)
    document.removeEventListener("touchstart", moving)
    document.removeEventListener("touchend", moving)
    document.removeEventListener("touchcancel", moving)
  }
  function moveStart(e) {
    e.preventDefault()
    document.addEventListener("mouseup", moveEnd)

    document.addEventListener("touchend", moveEnd)
    document.addEventListener("touchcancel", moveEnd)
  }

  function moveEnd(e) {
    e.preventDefault()
    unbindEventListeners()
  }

  function moving(e) {
    e.preventDefault()
    e.stopPropagation()
    const x = (e.touches ? e.touches[0].clientX : e.clientX) || 0
    const left = x - sliderRect.left

    let position
    if (left < 0) {
      position = 0
    } else if (left > sliderRect.width) {
      position = 100
    } else {
      position = Math.round((left * 100) / sliderRect.width)
    }
    setPosition(position)
  }
  // Init slider with data-value
  setPosition(slider.dataset.value)
}

// Example loading all slider with attribute "slider"
document.querySelectorAll("[slider]").forEach(function (elm) {
  makeSlider(elm)
  /* Watch changes in slider */
  elm.addEventListener("onchange", function (e) {
    console.log(`${elm.id} Changed`, e.detail.value)
  })
})