- Files
- Index
- Style
- Script
- README
- CDN Add
- Poppins v19 Google Fonts
PLEASE WAIT...
<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)
})
})