An animated range slider is a graphical user interface element that combines the functionality of a standard range slider with an animation component. In this tutorial we will learn top 10 custom animated range sliders using HTML, CSS and JavaScript with Source Code
Source Code:
1: Animated Range Slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: flex;
height: 100%;
text-align: center;
place-items: center;
background: red;
display: -webkit-box;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.range{
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.342);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: red;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.315);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: red;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: red;
border: 1px solid red;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: red;
border: 1px solid red;
cursor: pointer;
}
.range input::-moz-range-progress{
background: red;
}
.range input::-webkit-range-progress{
background: red;
}
</style>
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div class="value right">
200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>2: Custom Range Slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Range Slider</title>
<style>
html {
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
font-family: 'Work Sans', sans-serif;
text-align: center;
background: #e8eaec;
}
html h1, html h2, html h3, html h4, html h5, html h6 {
margin: 0;
}
html h1 {
color: #333;
font-weight: 500;
}
html h3 {
color: #aaa;
font-weight: 500;
}
html h4 {
color: #999;
font-weight: 500;
}
html h4:after {
content: "%";
padding-left: 1px;
}
html input[type="range"] {
outline: 0;
border: 0;
border-radius: 500px;
width: 400px;
max-width: 100%;
margin: 24px 0 16px;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
html input[type="range"] {
overflow: hidden;
height: 40px;
-webkit-appearance: none;
background-color: #e8eaec;
box-shadow:
-4px -4px 8px rgba(255, 255, 255, 0.849),
4px 4px 8px rgba(13, 39, 80, 0.2);
}
html input[type="range"]::-webkit-slider-runnable-track {
height: 40px;
-webkit-appearance: none;
color: #444;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
html input[type="range"]::-webkit-slider-thumb {
width: 40px;
-webkit-appearance: none;
height: 40px;
cursor: ew-resize;
background: #fff;
box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff;
border-radius: 50%;
-webkit-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
position: relative;
}
html input[type="range"]:active::-webkit-slider-thumb {
background: #fff;
box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 3px #1597ff;
}
}
html input[type="range"]::-moz-range-progress {
background-color: #43e5f7;
}
html input[type="range"]::-moz-range-track {
background-color: #9a905d;
}
html input[type="range"]::-ms-fill-lower {
background-color: #43e5f7;
}
html input[type="range"]::-ms-fill-upper {
background-color: #9a905d;
}
#h4-container {
width: 400px;
max-width: 100%;
padding: 0 20px;
box-sizing: border-box;
position: relative;
}
#h4-container #h4-subcontainer {
width: 100%;
position: relative;
}
#h4-container #h4-subcontainer h4 {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: absolute;
top: 0;
width: 40px;
height: 40px;
color: #fff !important;
font-size: 12px;
-webkit-transform-origin: center -10px;
transform-origin: center -10px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: margin-top 0.15s ease-in-out, opacity 0.15s ease-in-out;
transition: margin-top 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
#h4-container #h4-subcontainer h4 span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #1597ff;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
box-shadow: 4px 4px 10px rgba(13, 39, 80, 0.25),
-4px -4px 10px white;
}
input:not(:active) + #h4-container h4 {
opacity: 0;
margin-top: -50px;
pointer-events: none;
}
</style>
</head>
<body>
<h1>CSS Range Slider</h1>
<h3>JS used for color-change and % label</h3>
<input type="range" value="0">
<div id="h4-container">
<div id="h4-subcontainer">
<h4>0<span></span></h4>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$(function() {
var rangePercent = $('[type="range"]').val();
$('[type="range"]').on('change input', function() {
rangePercent = $('[type="range"]').val();
$('h4').html(rangePercent+'<span></span>');
$('[type="range"], h4>span').css('filter', 'hue-rotate(-' + rangePercent + 'deg)');
// $('h4').css({'transform': 'translateX(calc(-50% - 20px)) scale(' + (1+(rangePercent/100)) + ')', 'left': rangePercent+'%'});
$('h4').css({'transform': 'translateX(-50%) scale(' + (1+(rangePercent/100)) + ')', 'left': rangePercent+'%'});
});
});</script>
</body>
</html>3: Neumorphic range slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphic design of a range slider with pure CSS3</title>
<style>
body {
/*Removes the default margin preset by the browser*/
margin: 0;
min-height: 100vh;
/* Used to vertically center <main> when <main>'s margin is set to auto */
display: flex;
background-color: #b4c1cb;
/* Image for texture and lightening effect on background */
background-image:
linear-gradient(135deg, rgba(255,255,255,.5) 30%, rgba(0,0,0,.1)),
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAEnSURBVChTPZJJcoQwDEXlqfv+d8s2m9wCsEX+kxGmXIA1/EEuP79/t5aNMYx37mLFWqu23I3VWrO1ltXazJ13rVHEoqiUwqFVFd2uRtr8zzkjx8yVZ1ZJdnVlUxQhfdPdFft8P3EOIntO0NScRAKJRBHNQIHqvC47zzMagkpexFvrL8UsejhtvfpJXZzzDTFR3eKTInR679F5PZpLQbs0h3kwElVQ0hgC2cCXW1XxjkNvS9rSQJaWLATpdVbIjkFhfYtiULPx62qKT7PmvJRbRXsEwh4Djbb7u0WIxsVtOai8IcM3zl7a/sw08jMZKkmDZObIzGLGCgzJ6JoANscNSsS1ZiRlUc42kDHpuY4uV6Ffj+N4rxPJqSHoypQbV0UxDNRDE0byD7qr9Go2pueNAAAAAElFTkSuQmCC');
}
main {
margin: auto;
}
input[type="range"] {
/* To remove default styles appplied by webkit browsers */
-webkit-appearance: none;
width: 25em;
background: transparent;
position: relative;
}
input[type="range"]:focus {
/* To remove default (mostly blue) outline appplied by browsers on :focus */
outline: 0;
}
/* SLIDER THUMB -> represented by the orange ball in the design */
/* Webkit based browsers (chrome, opera, ...) */
input[type="range"]::-webkit-slider-thumb {
/* Removes the default styling */
-webkit-appearance: none;
width: 3em;
height: 3em;
margin: .5em 0;
background: hsl(27, 98%, 50%);
border-radius: 100%;
/* The inset shadow gives depth and makes the thumb look 3 dimensional and the other one shows a subtle effect of the shadow it creates because of the light source coming from the top left of the page */
box-shadow:
inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);;
cursor: pointer;
}
/*All the same stuff for firefox */
input[type=range]::-moz-range-thumb {
width: 3em;
height: 3em;
margin: .5em 0;
background: #fd8421;
border-radius: 100%;
box-shadow:
inset .8em .8em 5px -8px rgba(255, 255, 255, .4),
inset -.4em -.4em 10px -3px rgba(0,0,0,.2),
0.7em 0.5em 7px -0.5em rgba(0,0,0,.4);
cursor: pointer;
border: 0;
}
/* RUNNABLE TRACK -> represented by the indented carve in which the ball (thumb) moves */
/* Webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
background: transparent;
width: 100%;
height: 4em;
padding: 0 1em;
border-radius: 2em;
/* These shadow are what create the skeumorphic indent on the track. The first one is dark to show places in the indent that light don't reach and the second one shows places where light meets thereby creating the illusion of depth */
box-shadow:
inset .6em 1em 10px rgba(0,0,0,.15),
inset -.6em -1em 10px rgba(255, 255, 255, .415);
}
/* For firefox */
input[type=range]::-moz-range-track {
background: transparent;
width: 100%;
height: 4em;
padding: 0 1em;
border-radius: 2em;
box-shadow:
inset .6em 1em 10px rgba(0,0,0,.15),
inset -.6em -1em 10px rgba(255, 255, 255, .415);
}
/* For the numbering in the range's design - doesn't show on firefox but shows on chrome and opera */
input[type="range"]::before {
content: "0 1 2 3 4 5 6 7 8 9";
position: absolute;
text-align: center;
color: #c4c4c4;
font-size: 1em;
/*Serves to spread the letters to fit the whole width of the track */
letter-spacing: .65em;
top: 0; bottom: 0;
left: 0; right: 0;
padding: 1.6em;
/* Makes the letters look embossed adding to the skeumorphic theme of the design */
text-shadow: .5px .5px 0.9px rgba(0,0,0, .4);
z-index: -1;
}
</style>
</head>
<body>
<main>
<input type="range">
</main>
</body>
</html>4: Rage Slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rage Slider</title>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg: #d8d8d8;
--fg: #171717;
--fgT: #17171700;
--rageLight: #f13d17;
--rageDark: #962417;
--track: #969696;
--animDur: 0.2s;
--transDur: 0.1s;
font-size: calc(32px + (48 - 32)*(100vw - 320px)/(2560 - 320));
}
body, input {
color: var(--fg);
font: 1em/1.5 "Oswald", sans-serif;
}
body {
background: var(--bg);
display: flex;
height: 100vh;
}
form {
margin: auto;
width: 8.5em;
}
.rage {
position: relative;
}
.rage__input, .rage__track, .rage__flame-area {
width: 100%;
}
.rage__input {
background: transparent;
display: block;
outline: transparent;
margin: 2.25em 0;
height: 0.75em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rage__input::-webkit-slider-thumb {
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
width: 1.5em;
height: 1.5em;
-webkit-appearance: none;
appearance: none;
}
.rage__input::-moz-range-thumb {
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
width: 1.5em;
height: 1.5em;
}
.rage__input::-moz-focus-outer {
border: 0;
}
/* .rage__input--active is for keyboard interaction */
.rage__input:active + .rage__track,
.rage__input--active + .rage__track {
background: var(--rageDark);
}
.rage__input:active ~ .rage__face,
.rage__input--active ~ .rage__face,
.rage__input:active ~ .rage__face:after,
.rage__input--active ~ .rage__face:after {
background: var(--rageLight);
}
.rage__input:active ~ .rage__face:before,
.rage__input--active ~ .rage__face:before {
animation: pulse var(--animDur) var(--transDur) linear infinite;
transform: scale(1);
}
.rage__input:active ~ .rage__face:after,
.rage__input--active ~ .rage__face:after {
transform: scaleY(1);
}
.rage__input:active ~ .rage__face .rage__face-mouth,
.rage__input--active ~ .rage__face .rage__face-mouth {
transform: scaleY(-1);
}
.rage__track, .rage__flame-area, .rage__face, .rage__face:before, .rage__face:after, .rage__value {
position: absolute;
}
.rage__track, .rage__flame-area, .rage__face {
left: 0;
}
.rage__track, .rage__face {
transition: background var(--transDur) linear;
}
.rage__track, .rage__face:before, .rage__face:after {
content: "";
display: block;
}
.rage__track {
background: var(--track);
border-radius: 0.75em;
top: 0;
height: 0.75em;
z-index: -3;
}
.rage__flame-area {
bottom: -0.375em;
width: 100%;
height: 3em;
z-index: -2;
}
.rage__face, .rage__face:before {
border-radius: 50%;
}
.rage__face {
background: #fff;
box-shadow: 0 0 0 0.1em #0003 inset;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
top: -0.375em;
width: 1.5em;
height: 1.5em;
will-change: transform;
z-index: -1;
}
.rage__face:before, .rage__face-mouth {
transition: transform var(--transDur) linear;
}
.rage__face:before {
background-image:
radial-gradient(100% 100% at 50% 0,var(--fgT) 16%,var(--fg) 18% 31%,var(--fgT) 33%),
radial-gradient(100% 100% at 100% 50%,var(--fgT) 16%,var(--fg) 18% 31%,var(--fgT) 33%),
radial-gradient(100% 100% at 50% 100%,var(--fgT) 16%,var(--fg) 18% 31%,var(--fgT) 33%),
radial-gradient(100% 100% at 0 50%,var(--fgT) 16%,var(--fg) 18% 31%,var(--fgT) 33%);
top: -0.2em;
right: -0.2em;
width: 0.6em;
height: 0.6em;
transform: scale(0);
}
.rage__face:after {
background: #f1f1f1;
clip-path: polygon(0 0,100% 0,50% 100%);
-webkit-clip-path: polygon(0 0,100% 0,50% 100%);
top: 0.3em;
left: calc(50% - 0.4em);
width: 0.8em;
height: 0.4em;
transition: background var(--transDur) linear, transform var(--transDur) linear;
transform: scaleY(0);
transform-origin: 50% 0;
}
.rage__face-eye {
background: #171717;
border-radius: 50%;
margin: 0 0.125em 0.2em;
width: 0.2em;
height: 0.4em;
}
.rage__face-mouth {
border-radius: 0 0 50% 50% / 0 0 100% 100%;
box-shadow: 0 -0.1em 0 #171717 inset;
width: 0.75em;
height: 0.25em;
}
.rage__value {
top: 100%;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #242424;
--fg: #f1f1f1;
--fgT: #f1f1f100;
--track: #575757;
}
}
@keyframes pulse {
from, to { transform: scale(1); }
50% { transform: scale(1.25); }
}
</style>
</head>
<body>
<form>
<div class="rage" id="rageslider1">
<input class="rage__input" type="range" name="rage" value="0" min="0" max="20">
<div class="rage__track"></div>
<canvas class="rage__flame-area"></canvas>
<div class="rage__face">
<div class="rage__face-eye"></div>
<div class="rage__face-eye"></div>
<div class="rage__face-mouth"></div>
<div class="rage__value">0</div>
</div>
</div>
</form>
<script>
window.addEventListener("DOMContentLoaded",() => {
let rageslider1 = new RageSlider({id: "rageslider1"});
});
class RageSlider {
constructor(args) {
let el = document.querySelector(`#${args.id}`),
isMobile = "ontouchstart" in document.documentElement,
clientDownEvent = isMobile ? "touchstart" : "mousedown",
clientUpEvent = isMobile ? "touchend" : "mouseup";
this.track = el.querySelector(".rage__input");
this.flameArea = el.querySelector(".rage__flame-area");
this.flameAreaContext = this.flameArea.getContext("2d");
this.flameAreaScale = 2;
this.face = el.querySelector(".rage__face");
this.value = el.querySelector(".rage__value");
this.kbdActiveClass = "rage__input--active";
this.isBurning = false;
this.maxParticles = 32;
this.particle = () => ({
x: this.randomX(),
y: this.flameArea.height / this.flameAreaScale - this.getHandleHeight() / 2,
rStart: this.getHandleHeight() / 3,
speed: this.getHandleHeight() / 10
});
this.particles = [];
// assign listeners
window.addEventListener("resize",() => {
this.adjustCanvas();
});
this.track.addEventListener(clientDownEvent,e => {
if (e.which !== 3) {
this.isBurning = true;
this.startFlame();
}
});
this.track.addEventListener(clientUpEvent,() => {
this.isBurning = false;
});
this.track.addEventListener("keydown",e => {
let kc = e.keyCode;
if (kc >= 37 && kc <= 40) {
this.isBurning = true;
this.startFlame();
this.track.classList.add(this.kbdActiveClass);
}
});
this.track.addEventListener("keyup",() => {
this.isBurning = false;
this.track.classList.remove(this.kbdActiveClass);
});
this.track.addEventListener("input",() => {
this.updateFacePos();
});
// initiate
this.adjustCanvas();
this.updateFacePos();
}
adjustCanvas() {
let S = this.flameAreaScale,
OW = this.flameArea.offsetWidth,
OH = this.flameArea.offsetHeight;
// use natural canvas dimensions affected by ems
this.flameArea.width = OW * S;
this.flameArea.height = OH * S;
this.flameArea.style.width = OW + "px";
this.flameArea.style.height = OH + "px";
this.flameAreaContext.scale(S,S);
}
getHandleHeight() {
let CS = window.getComputedStyle(this.face),
height = CS.getPropertyValue("height"),
heightNoPx = parseFloat(height.split("px")[0]);
return heightNoPx;
}
getRangePercent() {
let max = this.track.max,
min = this.track.min,
relativeValue = this.track.value - min,
ticks = max - min,
percent = relativeValue / ticks;
return percent;
}
randomX() {
let handleSize = this.getHandleHeight(),
handleRad = handleSize/2,
// get the current handle position
xLimit = this.flameArea.width / this.flameAreaScale - handleSize,
placeX = handleRad + (this.getRangePercent() * xLimit),
// randomly adjust between the handle center and edge
flip = Math.random() < 0.5 ? -1 : 1,
displace = Math.random() * (handleRad - handleSize/3) * flip,
x = placeX + displace;
return x;
}
startFlame() {
if (!this.particles.length)
this.updateFlame();
}
updateFlame() {
let c = this.flameAreaContext,
S = this.flameAreaScale,
W = this.flameArea.width / S,
H = this.flameArea.height / S,
faceCenter = H - this.getHandleHeight()/2;
c.clearRect(0,0,W,H);
// supply particles
if (this.particles.length < this.maxParticles && this.isBurning)
this.particles.push(this.particle());
// particle ascension
for (let p of this.particles) {
let faceCenterToTopPct = p.y / faceCenter,
pRadius = p.rStart * faceCenterToTopPct;
p.y -= p.speed;
if (p.y <= 0) {
// particles shouldn’t regenerate if the user stops interacting
if (this.isBurning) {
p.x = this.randomX();
p.y = faceCenter;
} else {
this.particles.shift();
}
} else {
// draw the particle
let hue = 50 * faceCenterToTopPct;
c.fillStyle = `hsl(${hue},90%,50%)`;
c.beginPath();
c.arc(p.x,p.y,pRadius,0,2*Math.PI);
c.fill();
c.closePath();
}
}
requestAnimationFrame(() => {
if (this.particles.length)
this.updateFlame();
});
}
updateFacePos() {
let percent = this.getRangePercent(),
left = percent * 100,
emAdjust = percent * 1.5;
this.face.style.left = `calc(${left}% - ${emAdjust}em)`;
this.value.innerHTML = this.track.value;
}
}
</script>
</body>
</html>5: Range slider output.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Range slider output</title>
<style>
.range {
position: relative;
}
.range input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
width: 100%;
height: 22px;
cursor: pointer;
display: block;
}
.range input[type=range]:focus {
outline: none;
}
.range input[type=range][disabled] {
opacity: .3;
cursor: default;
}
.range .rangeslider {
position: relative;
height: 22px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.range .rangeslider:before {
box-sizing: border-box;
width: 100%;
height: 15px;
box-shadow: inset 0 3px 18px rgba(0, 0, 0, 0.6);
border-radius: 100px;
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.range input::-webkit-slider-runnable-track {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
margin: 11px 0;
}
.range input::-moz-range-track {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
margin: 11px 0;
}
.range input::-ms-track {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
color: transparent;
padding: 11px 0;
background: transparent;
border-color: transparent;
}
.range input::-ms-fill-lower,
.range input::-ms-fill-upper {
box-sizing: border-box;
width: 100%;
height: 4px;
background: #e6e6e6;
border-radius: 100px;
}
.range input::-ms-fill-lower {
background: #60cd18;
}
.range .rangeslider-fill-lower {
background-color: #383c42;
border-radius: 100px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 15px;
will-change: width;
}
.range input::-webkit-slider-thumb {
box-sizing: border-box;
box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
border: 6px solid #fff;
height: 24px;
width: 24px;
border-radius: 100px;
background: #333940;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-top: 2px;
}
.range input::-moz-range-thumb {
box-sizing: border-box;
box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
border: 6px solid #fff;
height: 24px;
width: 24px;
border-radius: 100px;
background: #333940;
cursor: pointer;
}
.range input::-ms-thumb {
box-sizing: border-box;
box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
border: 6px solid #fff;
height: 24px;
width: 24px;
border-radius: 100px;
background: #333940;
cursor: pointer;
}
.range .rangeslider-thumb {
box-sizing: border-box;
box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
border: 6px solid #fff;
height: 24px;
width: 24px;
border-radius: 100px;
background: #333940;
cursor: pointer;
position: absolute;
touch-action: pan-x;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
will-change: left;
}
.range .range-output {
position: absolute;
left: 6px;
top: 6px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.range .range-output .output {
display: block;
position: absolute;
height: 60px;
line-height: 60px;
min-width: 32px;
padding: 0 20px;
top: -26px;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
background: #383c42;
color: #fff;
border-radius: 100px;
white-space: nowrap;
font-weight: bold;
font-size: 1.2em;
text-align: center;
}
.range .range-output .output:before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
border: 10px solid #383c42;
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
body {
font-family: Helvetica Neue, Helvetica, Arial;
font-weight: 300;
background: #00cc66;
}
main {
display: -webkit-box;
display: flex;
height: 90vh;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
color: #333;
}
form {
max-width: 500px;
min-width: 320px;
}
h2 {
font-weight: 300;
text-align: center;
margin-bottom: 30px;
}
</style>
</head>
<body>
<main>
<form oninput="output.value = Math.round(range.valueAsNumber / 1000)">
<h2>
Range slider
</h2>
<div class="range">
<input name="range" type="range" min="0" max="100000">
<div class="range-output">
<output class="output" name="output" for="range">
50
</output>
</div>
</div>
</form>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
const END = 'change';
const START = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
const INPUT = 'input';
const MAX_ROTATION = 35;
const SOFTEN_FACTOR = 3;
class RangeInput {
constructor(el) {
this.el = el;
this._handleEnd = this._handleEnd.bind(this);
this._handleStart = this._handleStart.bind(this);
this._handleInput = this._handleInput.bind(this);
//Call the plugin
$(this.el.querySelector('input[type=range]')).rangeslider({
polyfill: false, //Never use the native polyfill
rangeClass: 'rangeslider',
disabledClass: 'rangeslider-disabled',
horizontalClass: 'rangeslider-horizontal',
verticalClass: 'rangeslider-vertical',
fillClass: 'rangeslider-fill-lower',
handleClass: 'rangeslider-thumb',
onInit: function () {
//No args are passed, so we can't change context of this
const pluginInstance = this;
//Move the range-output inside the handle so we can do all the stuff in css
$(pluginInstance.$element).
parents('.range').
find('.range-output').
appendTo(pluginInstance.$handle);
} });
this.sliderThumbEl = el.querySelector('.rangeslider-thumb');
this.outputEl = el.querySelector('.range-output');
this.inputEl = el.querySelector('input[type=range]');
this._lastOffsetLeft = 0;
this._lastTimeStamp = 0;
this.el.querySelector('.rangeslider').addEventListener(START, this._handleStart);
}
_handleStart(e) {
this._lastTimeStamp = new Date().getTime();
this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;
//Wrap in raf because offsetLeft is updated by the plugin after this fires
requestAnimationFrame(_ => {
//Bind through jquery because plugin doesn't fire native event
$(this.inputEl).on(INPUT, this._handleInput);
$(this.inputEl).on(END, this._handleEnd);
});
}
_handleEnd(e) {
//Unbind through jquery because plugin doesn't fire native event
$(this.inputEl).off(INPUT, this._handleInput);
$(this.inputEl).off(END, this._handleEnd);
requestAnimationFrame(_ => this.outputEl.style.transform = 'rotate(0deg)');
}
_handleInput(e) {
let now = new Date().getTime();
let timeElapsed = now - this._lastTimeStamp || 1;
let distance = this.sliderThumbEl.offsetLeft - this._lastOffsetLeft;
let direction = distance < 0 ? -1 : 1;
let velocity = Math.abs(distance) / timeElapsed; //pixels / millisecond
let targetRotation = Math.min(Math.abs(distance * velocity) * SOFTEN_FACTOR, MAX_ROTATION);
requestAnimationFrame(_ => this.outputEl.style.transform = 'rotate(' + targetRotation * -direction + 'deg)');
this._lastTimeStamp = now;
this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;
}}
/*! rangeslider.js - v2.1.1 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
!function (a) {"use strict";"function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof exports ? module.exports = a(require("jquery")) : a(jQuery);}(function (a) {"use strict";function b() {var a = document.createElement("input");return a.setAttribute("type", "range"), "text" !== a.type;}function c(a, b) {var c = Array.prototype.slice.call(arguments, 2);return setTimeout(function () {return a.apply(null, c);}, b);}function d(a, b) {return b = b || 100, function () {if (!a.debouncing) {var c = Array.prototype.slice.apply(arguments);a.lastReturnVal = a.apply(window, c), a.debouncing = !0;}return clearTimeout(a.debounceTimeout), a.debounceTimeout = setTimeout(function () {a.debouncing = !1;}, b), a.lastReturnVal;};}function e(a) {return a && (0 === a.offsetWidth || 0 === a.offsetHeight || a.open === !1);}function f(a) {for (var b = [], c = a.parentNode; e(c);) b.push(c), c = c.parentNode;return b;}function g(a, b) {function c(a) {"undefined" != typeof a.open && (a.open = a.open ? !1 : !0);}var d = f(a),e = d.length,g = [],h = a[b];if (e) {for (var i = 0; e > i; i++) g[i] = d[i].style.cssText, d[i].style.setProperty ? d[i].style.setProperty("display", "block", "important") : d[i].style.cssText += ";display: block !important", d[i].style.height = "0", d[i].style.overflow = "hidden", d[i].style.visibility = "hidden", c(d[i]);h = a[b];for (var j = 0; e > j; j++) d[j].style.cssText = g[j], c(d[j]);}return h;}function h(a, b) {var c = parseFloat(a);return Number.isNaN(c) ? b : c;}function i(a) {return a.charAt(0).toUpperCase() + a.substr(1);}function j(b, e) {if (this.$window = a(window), this.$document = a(document), this.$element = a(b), this.options = a.extend({}, n, e), this.polyfill = this.options.polyfill, this.orientation = this.$element[0].getAttribute("data-orientation") || this.options.orientation, this.onInit = this.options.onInit, this.onSlide = this.options.onSlide, this.onSlideEnd = this.options.onSlideEnd, this.DIMENSION = o.orientation[this.orientation].dimension, this.DIRECTION = o.orientation[this.orientation].direction, this.DIRECTION_STYLE = o.orientation[this.orientation].directionStyle, this.COORDINATE = o.orientation[this.orientation].coordinate, this.polyfill && m) return !1;this.identifier = "js-" + k + "-" + l++, this.startEvent = this.options.startEvent.join("." + this.identifier + " ") + "." + this.identifier, this.moveEvent = this.options.moveEvent.join("." + this.identifier + " ") + "." + this.identifier, this.endEvent = this.options.endEvent.join("." + this.identifier + " ") + "." + this.identifier, this.toFixed = (this.step + "").replace(".", "").length - 1, this.$fill = a('<div class="' + this.options.fillClass + '" />'), this.$handle = a('<div class="' + this.options.handleClass + '" />'), this.$range = a('<div class="' + this.options.rangeClass + " " + this.options[this.orientation + "Class"] + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle), this.$element.css({ position: "absolute", width: "1px", height: "1px", overflow: "hidden", opacity: "0" }), this.handleDown = a.proxy(this.handleDown, this), this.handleMove = a.proxy(this.handleMove, this), this.handleEnd = a.proxy(this.handleEnd, this), this.init();var f = this;this.$window.on("resize." + this.identifier, d(function () {c(function () {f.update(!1, !1);}, 300);}, 20)), this.$document.on(this.startEvent, "#" + this.identifier + ":not(." + this.options.disabledClass + ")", this.handleDown), this.$element.on("change." + this.identifier, function (a, b) {if (!b || b.origin !== f.identifier) {var c = a.target.value,d = f.getPositionFromValue(c);f.setPosition(d);}});}Number.isNaN = Number.isNaN || function (a) {return "number" == typeof a && a !== a;};var k = "rangeslider",l = 0,m = b(),n = { polyfill: !0, orientation: "horizontal", rangeClass: "rangeslider", disabledClass: "rangeslider--disabled", horizontalClass: "rangeslider--horizontal", verticalClass: "rangeslider--vertical", fillClass: "rangeslider__fill", handleClass: "rangeslider__handle", startEvent: ["mousedown", "touchstart", "pointerdown"], moveEvent: ["mousemove", "touchmove", "pointermove"], endEvent: ["mouseup", "touchend", "pointerup"] },o = { orientation: { horizontal: { dimension: "width", direction: "left", directionStyle: "left", coordinate: "x" }, vertical: { dimension: "height", direction: "top", directionStyle: "bottom", coordinate: "y" } } };return j.prototype.init = function () {this.update(!0, !1), this.onInit && "function" == typeof this.onInit && this.onInit();}, j.prototype.update = function (a, b) {a = a || !1, a && (this.min = h(this.$element[0].getAttribute("min"), 0), this.max = h(this.$element[0].getAttribute("max"), 100), this.value = h(this.$element[0].value, Math.round(this.min + (this.max - this.min) / 2)), this.step = h(this.$element[0].getAttribute("step"), 1)), this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)), this.rangeDimension = g(this.$range[0], "offset" + i(this.DIMENSION)), this.maxHandlePos = this.rangeDimension - this.handleDimension, this.grabPos = this.handleDimension / 2, this.position = this.getPositionFromValue(this.value), this.$element[0].disabled ? this.$range.addClass(this.options.disabledClass) : this.$range.removeClass(this.options.disabledClass), this.setPosition(this.position, b);}, j.prototype.handleDown = function (a) {if (this.$document.on(this.moveEvent, this.handleMove), this.$document.on(this.endEvent, this.handleEnd), !((" " + a.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1)) {var b = this.getRelativePosition(a),c = this.$range[0].getBoundingClientRect()[this.DIRECTION],d = this.getPositionFromNode(this.$handle[0]) - c,e = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;this.setPosition(e), b >= d && b < d + this.handleDimension && (this.grabPos = b - d);}}, j.prototype.handleMove = function (a) {a.preventDefault();var b = this.getRelativePosition(a),c = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;this.setPosition(c);}, j.prototype.handleEnd = function (a) {a.preventDefault(), this.$document.off(this.moveEvent, this.handleMove), this.$document.off(this.endEvent, this.handleEnd), this.$element.trigger("change", { origin: this.identifier }), this.onSlideEnd && "function" == typeof this.onSlideEnd && this.onSlideEnd(this.position, this.value);}, j.prototype.cap = function (a, b, c) {return b > a ? b : a > c ? c : a;}, j.prototype.setPosition = function (a, b) {var c, d;void 0 === b && (b = !0), c = this.getValueFromPosition(this.cap(a, 0, this.maxHandlePos)), d = this.getPositionFromValue(c), this.$fill[0].style[this.DIMENSION] = d + this.grabPos + "px", this.$handle[0].style[this.DIRECTION_STYLE] = d + "px", this.setValue(c), this.position = d, this.value = c, b && this.onSlide && "function" == typeof this.onSlide && this.onSlide(d, c);}, j.prototype.getPositionFromNode = function (a) {for (var b = 0; null !== a;) b += a.offsetLeft, a = a.offsetParent;return b;}, j.prototype.getRelativePosition = function (a) {var b = i(this.COORDINATE),c = this.$range[0].getBoundingClientRect()[this.DIRECTION],d = 0;return "undefined" != typeof a["page" + b] ? d = a["client" + b] : "undefined" != typeof a.originalEvent["client" + b] ? d = a.originalEvent["client" + b] : a.originalEvent.touches && a.originalEvent.touches[0] && "undefined" != typeof a.originalEvent.touches[0]["client" + b] ? d = a.originalEvent.touches[0]["client" + b] : a.currentPoint && "undefined" != typeof a.currentPoint[this.COORDINATE] && (d = a.currentPoint[this.COORDINATE]), d - c;}, j.prototype.getPositionFromValue = function (a) {var b, c;return b = (a - this.min) / (this.max - this.min), c = Number.isNaN(b) ? 0 : b * this.maxHandlePos;}, j.prototype.getValueFromPosition = function (a) {var b, c;return b = a / (this.maxHandlePos || 1), c = this.step * Math.round(b * (this.max - this.min) / this.step) + this.min, Number(c.toFixed(this.toFixed));}, j.prototype.setValue = function (a) {(a !== this.value || "" === this.$element[0].value) && this.$element.val(a).trigger("input", { origin: this.identifier });}, j.prototype.destroy = function () {this.$document.off("." + this.identifier), this.$window.off("." + this.identifier), this.$element.off("." + this.identifier).removeAttr("style").removeData("plugin_" + k), this.$range && this.$range.length && this.$range[0].parentNode.removeChild(this.$range[0]);}, a.fn[k] = function (b) {var c = Array.prototype.slice.call(arguments, 1);return this.each(function () {var d = a(this),e = d.data("plugin_" + k);e || d.data("plugin_" + k, e = new j(this, b)), "string" == typeof b && e[b].apply(e, c);});}, "rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);";});
new RangeInput(document.querySelector('.range'));
</script>
</body>
</html>6: Range slider with text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Range slider with text</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Monoton&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-flow: column nowrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100vw;
height: 100vh;
background: linear-gradient(to right, #fc00ff, #00dbde);
}
.fill-area {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100vw;
height: 100vh;
background: #333838;
box-shadow: inset 3px 3px 5px -1px #111;
pointer-events: none;
}
label {
position: static;
z-index: 1;
font: 8rem sans-serif;
color: #fff;
margin: -5rem 0 2rem;
}
label::after {
content: "%";
}
input[type=range] {
position: static;
z-index: 2;
width: 50vw;
height: 1rem;
background: rgba(255, 255, 255, 0.8);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
border-radius: 100vmax;
box-shadow: inset 3px 3px 5px -1px #000;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 4vw;
height: 4vw;
background: #eee;
border-radius: 50%;
cursor: pointer;
box-shadow: 5px 5px 8px -1px #000;
-webkit-transition: box-shadow 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out;
}
input[type=range]:hover::-webkit-slider-thumb {
background: #fff;
box-shadow: 3px 3px 5px -1px #000;
}
input[type=range]::-ms-track {
width: 100%;
background: transparent;
border-color: transparent;
color: transparent;
}
@media screen and (max-width: 532px) {
label {
font-size: 24vw;
}
}
</style>
</head>
<body>
<main>
<div class="fill-area"></div>
<label id="range-value" for="range">0</label>
<input id="range" type="range" name="range" value="0" min="0" max="100" onmousemove="handleMouseMove(this.value)" onchange="handleMouseMove(this.value)"/>
</main>
<script>
function handleMouseMove(value) {
const rangeValueElement = document.querySelector("#range-value")
const inputElement = document.querySelector('input[type="range"]')
const fillAreaElement = document.querySelector(".fill-area")
const hueRotate = "hue-rotate(" + value + "deg)"
rangeValueElement.textContent = value
rangeValueElement.style.filter = hueRotate
inputElement.style.filter = hueRotate
fillAreaElement.style.left = value + "vw"
fillAreaElement.style.width = (100-value) + "vw"
fillAreaElement.style.filter = hueRotate
}
</script>
</body>
</html>7: SVG Balloon Slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Balloon Slider </title>
<style>
body {
background-color: #03A9F4;
overflow: hidden;
font-family: 'Ropa Sans', sans-serif;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg {
width: 150%;
height:150%;
visibility: hidden;
}
.upText,
.downText {
text-anchor: middle;
font-weight: 700;
font-size: 14px;
fill: #03A9F4;
letter-spacing: 0.4px;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
text-rendering: optimizeSpeed;
}
.upText {
font-size: 24px;
}
#dragger{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.downText {
letter-spacing: -0.4px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<filter id="goo" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="cm" />
</filter>
</defs>
<g id="dragGroup">
<path id="dragBar" fill="#FFFFFF" d="M447,299.5c0,1.4-1.1,2.5-2.5,2.5h-296c-1.4,0-2.5-1.1-2.5-2.5l0,0c0-1.4,1.1-2.5,2.5-2.5
h296C445.9,297,447,298.1,447,299.5L447,299.5z" />
<g id="displayGroup">
<g id="gooGroup" filter="url(#goo)">
<circle id="display" fill="#FFFFFF" cx="146" cy="299.5" r="16" />
<circle id="dragger" fill="#FFFFFF" stroke="#03A9F4" stroke-width="0" cx="146" cy="299.5" r="15" />
</g>
<text class="downText" x="146" y="304">0</text>
<text class="upText" x="145" y="266">0</text>
</g>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/utils/Draggable.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script>
var xmlns = "http://www.w3.org/2000/svg",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
dragger = select('#dragger'),
dragVal,
maxDrag = 300
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set('#upText', {
alpha: 0,
transformOrigin: '50% 50%'
})
TweenLite.defaultEase = Elastic.easeOut.config(0.4, 0.1);
var tl = new TimelineMax({
paused: true
});
tl.addLabel("blobUp")
.to('#display', 1, {
attr: {
cy: '-=40',
r: 30
}
})
.to('#dragger', 1, {
attr: {
//cy:'-=2',
r: 8
}
}, '-=1')
.set('#dragger', {
strokeWidth: 4
}, '-=1')
.to('.downText', 1, {
//alpha:0,
alpha: 0,
transformOrigin: '50% 50%'
}, '-=1')
.to('.upText', 1, {
//alpha:1,
alpha: 1,
transformOrigin: '50% 50%'
}, '-=1')
.addPause()
.addLabel("blobDown")
.to('#display', 1, {
attr: {
cy: 299.5,
r: 0
},
ease: Expo.easeOut
})
.to('#dragger', 1, {
attr: {
//cy:'-=35',
r: 15
}
}, '-=1')
.set('#dragger', {
strokeWidth: 0
}, '-=1')
.to('.downText', 1, {
alpha: 1,
ease: Power4.easeOut
}, '-=1')
.to('.upText', 0.2, {
alpha: 0,
ease: Power4.easeOut,
attr: {
y: '+=45'
}
}, '-=1')
Draggable.create(dragger, {
type: 'x',
cursor: 'pointer',
throwProps: true,
bounds: {
minX: 0,
maxX: maxDrag
},
onPress: function() {
tl.play('blobUp')
},
onRelease: function() {
tl.play('blobDown')
},
onDrag: dragUpdate,
onThrowUpdate: dragUpdate
})
function dragUpdate() {
dragVal = Math.round((this.target._gsTransform.x / maxDrag) * 100);
select('.downText').textContent = select('.upText').textContent = dragVal;
TweenMax.to('#display', 1.3, {
x: this.target._gsTransform.x
})
TweenMax.staggerTo(['.upText', '.downText'], 1, {
// x:this.target._gsTransform.x,
cycle: {
attr: [{
x: this.target._gsTransform.x + 146
}]
},
ease: Elastic.easeOut.config(1, 0.4)
}, '0.02')
}
TweenMax.to(dragger, 1, {
x: 150,
onUpdate: dragUpdate,
ease: Power1.easeInOut
})
</script>
</body>
</html>8: Slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Hind+Madurai:300,600|Poppins:300&display=swap");
:root {
--yellow: #ffd049;
--light-yellow: #fdf2d2;
--orange: #ffa929;
--light-gray: #e3e4e8;
--gray: #71738b;
--light-blue: #7a7c93;
--blue: #34385a;
--slider-handle-size: 14px;
--slider-handle-border-radius: 2px;
--slider-handle-margin-top: -4px;
--slider-track-height: 6px;
--slider-track-border-radius: 4px;
}
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
}
#wrapper {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#sliderContainer {
width: 100%;
max-width: 440px;
padding: 56px 40px;
border-radius: 40px;
box-shadow: 0px 8px 40px rgba(128, 128, 128, 0.15);
}
#sliderContainer>div:first-child {
margin-bottom: 48px;
}
.tick-slider-header {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
}
.tick-slider-header>h5 {
margin: 0;
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 300;
color: var(--gray);
}
.tick-slider {
position: relative;
width: 100%;
}
.tick-slider-value-container {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
font-family: "Hind Madurai", sans-serif;
font-size: 18px;
color: var(--gray);
}
.tick-slider-value {
position: absolute;
top: 0;
font-weight: bold;
color: var(--blue);
border-radius: var(--slider-handle-border-radius);
}
.tick-slider-value>div {
animation: bulge 0.3s ease-out;
}
.tick-slider-background,
.tick-slider-progress,
.tick-slider-tick-container {
position: absolute;
bottom: 5px;
left: 0;
height: var(--slider-track-height);
pointer-events: none;
border-radius: var(--slider-track-border-radius);
z-index: -1;
}
.tick-slider-background {
width: 100%;
background-color: var(--light-gray);
}
.tick-slider-progress {
background-color: var(--yellow);
}
.tick-slider-tick-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 calc(var(--slider-handle-size) / 2);
}
.tick-slider-tick {
width: 2px;
height: 2px;
border-radius: 50%;
background-color: white;
}
.tick-slider-label {
opacity: 0.85;
transition: opacity 0.1s ease;
}
.tick-slider-label.hidden {
opacity: 0;
}
@keyframes bulge {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/*
REMOVE SLIDER STYLE DEFAULTS
*/
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 100%;
background: transparent;
outline: none;
margin: 5px 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-moz-focus-outer {
border: 0;
}
/*
HANDLE
*/
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--slider-handle-size);
height: var(--slider-handle-size);
background: var(--orange);
border-radius: var(--slider-handle-border-radius);
cursor: pointer;
margin-top: var(--slider-handle-margin-top);
-webkit-transform: scale(1);
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb {
transform: scale(1.2);
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
width: var(--slider-handle-size);
height: var(--slider-handle-size);
background: var(--orange);
border: none;
border-radius: var(--slider-handle-border-radius);
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb {
transform: scale(1.2);
}
/*
TRACK
*/
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: var(--slider-track-height);
cursor: pointer;
background: none;
border-radius: var(--slider-track-border-radius);
}
input[type="range"]::-moz-range-track {
width: 100%;
height: var(--slider-track-height);
cursor: pointer;
background: none;
border-radius: var(--slider-track-border-radius);
}
input[type="range"]:focus::-webkit-slider-runnable-track {
background: none;
}
input[type="range"]:active::-webkit-slider-runnable-track {
background: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sliderContainer">
<div class="tick-slider">
<div class="tick-slider-header">
<h5><label for="weightSlider">Total weight</label></h5>
<h5>kg</h5>
</div>
<div class="tick-slider-value-container">
<div id="weightLabelMin" class="tick-slider-label">0</div>
<div id="weightLabelMax" class="tick-slider-label">40</div>
<div id="weightValue" class="tick-slider-value"></div>
</div>
<div class="tick-slider-background"></div>
<div id="weightProgress" class="tick-slider-progress"></div>
<div id="weightTicks" class="tick-slider-tick-container"></div>
<input
id="weightSlider"
class="tick-slider-input"
type="range"
min="0"
max="40"
step="5"
value="9"
data-tick-step="5"
data-tick-id="weightTicks"
data-value-id="weightValue"
data-progress-id="weightProgress"
data-handle-size="18"
data-min-label-id="weightLabelMin"
data-max-label-id="weightLabelMax"
/>
</div>
<div class="tick-slider">
<div class="tick-slider-header">
<h5><label for="sizeSlider">Total size</label></h5>
<h5>cm</h5>
</div>
<div class="tick-slider-value-container">
<div id="sizeLabelMin" class="tick-slider-label">0</div>
<div id="sizeLabelMax" class="tick-slider-label">300</div>
<div id="sizeValue" class="tick-slider-value"></div>
</div>
<div class="tick-slider-background"></div>
<div id="sizeProgress" class="tick-slider-progress"></div>
<div id="sizeTicks" class="tick-slider-tick-container"></div>
<input
id="sizeSlider"
class="tick-slider-input"
type="range"
min="0"
max="300"
step="25"
value="150"
data-tick-step="25"
data-tick-id="sizeTicks"
data-value-id="sizeValue"
data-progress-id="sizeProgress"
data-handle-size="18"
data-min-label-id="sizeLabelMin"
data-max-label-id="sizeLabelMax"
/>
</div>
</div>
</div>
<script>
function init() {
const sliders = document.getElementsByClassName("tick-slider-input");
for (let slider of sliders) {
slider.oninput = onSliderInput;
updateValue(slider);
updateValuePosition(slider);
updateLabels(slider);
updateProgress(slider);
setTicks(slider);
}
}
function onSliderInput(event) {
updateValue(event.target);
updateValuePosition(event.target);
updateLabels(event.target);
updateProgress(event.target);
}
function updateValue(slider) {
let value = document.getElementById(slider.dataset.valueId);
value.innerHTML = "<div>" + slider.value + "</div>";
}
function updateValuePosition(slider) {
let value = document.getElementById(slider.dataset.valueId);
const percent = getSliderPercent(slider);
const sliderWidth = slider.getBoundingClientRect().width;
const valueWidth = value.getBoundingClientRect().width;
const handleSize = slider.dataset.handleSize;
let left = percent * (sliderWidth - handleSize) + handleSize / 2 - valueWidth / 2;
left = Math.min(left, sliderWidth - valueWidth);
left = slider.value === slider.min ? 0 : left;
value.style.left = left + "px";
}
function updateLabels(slider) {
const value = document.getElementById(slider.dataset.valueId);
const minLabel = document.getElementById(slider.dataset.minLabelId);
const maxLabel = document.getElementById(slider.dataset.maxLabelId);
const valueRect = value.getBoundingClientRect();
const minLabelRect = minLabel.getBoundingClientRect();
const maxLabelRect = maxLabel.getBoundingClientRect();
const minLabelDelta = valueRect.left - (minLabelRect.left);
const maxLabelDelta = maxLabelRect.left - valueRect.left;
const deltaThreshold = 32;
if (minLabelDelta < deltaThreshold) minLabel.classList.add("hidden");
else minLabel.classList.remove("hidden");
if (maxLabelDelta < deltaThreshold) maxLabel.classList.add("hidden");
else maxLabel.classList.remove("hidden");
}
function updateProgress(slider) {
let progress = document.getElementById(slider.dataset.progressId);
const percent = getSliderPercent(slider);
progress.style.width = percent * 100 + "%";
}
function getSliderPercent(slider) {
const range = slider.max - slider.min;
const absValue = slider.value - slider.min;
return absValue / range;
}
function setTicks(slider) {
let container = document.getElementById(slider.dataset.tickId);
const spacing = parseFloat(slider.dataset.tickStep);
const sliderRange = slider.max - slider.min;
const tickCount = sliderRange / spacing + 1; // +1 to account for 0
for (let ii = 0; ii < tickCount; ii++) {
let tick = document.createElement("span");
tick.className = "tick-slider-tick";
container.appendChild(tick);
}
}
function onResize() {
const sliders = document.getElementsByClassName("tick-slider-input");
for (let slider of sliders) {
updateValuePosition(slider);
}
}
window.onload = init;
window.addEventListener("resize", onResize);
</script>
</body>
</html>9: Smoke Slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smoke Slider</title>
<style>
.slider {
--line-background: rgba(255, 255, 255, 0.6);
--line-active: #fff;
--handle-background: #275EFE;
--handle-border: #fff;
--handle-text-color: #fff;
--smoke-background: #fff;
--smoke-shadow: inset 3px 3px 0 0 #E1E6F9;
max-width: 320px;
width: 100%;
}
.slider .rangeslider {
width: 100%;
height: 3px;
position: relative;
}
.slider .rangeslider .rangeslider__fill__bg,
.slider .rangeslider .rangeslider__fill {
--b: var(--line-active);
position: absolute;
left: 0;
z-index: 1;
top: var(--t, 0);
height: var(--h, 3px);
background: var(--b);
border-radius: 2px;
}
.slider .rangeslider .rangeslider__fill__bg {
--t: 1px;
--h: 1px;
--b: var(--line-background);
width: 100%;
}
.slider .rangeslider .rangeslider__handle {
width: 33px;
height: 33px;
left: 0;
top: 2px;
z-index: 2;
position: absolute;
cursor: pointer;
}
.slider .rangeslider .rangeslider__handle:before {
content: attr(data-value);
top: 6px;
left: -8px;
right: -8px;
position: absolute;
text-align: center;
font-family: inherit;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: var(--handle-text-color);
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
-webkit-transform: translateY(var(--y, 0)) scale(var(--s, 0.7));
transform: translateY(var(--y, 0)) scale(var(--s, 0.7));
}
.slider .rangeslider .rangeslider__handle:after {
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
border: 3px solid var(--handle-border);
background: var(--handle-background);
}
.slider .rangeslider .rangeslider__handle:active, .slider .rangeslider .rangeslider__handle.active {
--s: 1;
--y: 44px;
}
.slider .rangeslider .smoke {
background: var(--smoke-background);
box-shadow: var(--smoke-shadow);
position: absolute;
overflow: hidden;
pointer-events: none;
left: -4px;
top: 0;
width: 41px;
height: 41px;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: inherit;
}
*:before, *:after {
box-sizing: inherit;
}
body {
min-height: 90vh;
font-family: 'Roboto', Arial;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
background: #275EFE;
font-family: 'Roboto', Arial, sans-serif;
}
</style>
</head>
<body>
<div class="slider">
<input type="range" min="1" max="100" value="50">
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rangeslider-js@3.2.5/dist/rangeslider-js.min.js"></script>
<script>
const $ = (s, o = document) => o.querySelector(s);
var interval;
let slider = $('.slider'),
input = $('input', slider),
random = (min, max) => min + Math.random() * (max - min),
between = (min, max, percent) => max - (max - min) * (1 - percent),
create = slider => {
let percent = slider.handle.dataset.percent,
position = slider.handle.dataset.position,
div = document.createElement('div');
div.classList.add('smoke');
slider.range.appendChild(div);
gsap.set(div, {
x: position,
y: -20
});
gsap.timeline().to(div, {
scale: random(between(.15, 1, percent), between(.4, 2, percent)),
duration: between(.8, 1.2, percent)
}).to(div, {
scale: 0,
duration: between(.3, .5, percent)
});
gsap.to(div, {
duration: between(.3, .4, percent),
opacity: 1
});
gsap.to(div, {
duration: between(2, 3, percent),
y: random(between(-40, -200, percent), between(-70, -320, percent)),
x: random(between(-20, -90, percent), between(20, 90, percent)) + parseInt(position),
onComplete() {
div.remove();
}
});
};
rangesliderJs.create(input, {
onInit(value) {
this.handle.dataset.value = value;
},
onSlideStart(value, percent, position) {
this.handle.classList.add('active');
interval = setInterval(() => {
create(this);
}, 50);
},
onSlide(value, percent, position) {
this.handle.dataset.value = value;
this.handle.dataset.percent = percent;
this.handle.dataset.position = position;
},
onSlideEnd() {
this.handle.classList.remove('active');
clearInterval(interval);
}
});
</script>
</body>
</html>10: budgetSlider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>budgetSlider</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,900);
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);
@import url(https://fonts.googleapis.com/css?family=Exo:300,800);
* {
margin:0px;
padding:0px;
}
.cube {
-webkit-box-reflect: below 10px linear-gradient(transparent, #0005);
position:relative;
width:500px;
height:60px;
margin:5rem auto;
-webkit-transform-style:preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective:400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
/* positions */
.a, .b, .c, .d {
position:absolute;
width:50%;
height:100%;
left:0px;
z-index:222;
}
.a:before, .b:before, .c:before, .d:before, .a:after, .b:after {
content:'';
position:absolute;
top:0px;
left:0px;
width:500px;
height:60px;
}
.a:before, .b:before, .c:before, .d:before {
z-index:111;
}
.a:after, .b:after {
z-index:333;
}
.b {
top:0px;
-webkit-transform:rotateX(75deg) translateY(-60px);
-moz-transform: rotateX(75deg) translateY(-60px);
-o-transform: rotateX(75deg) translateY(-60px);
-ms-transform: rotateX(75deg) translateY(-60px);
transform: rotateX(75deg) translateY(-60px);
-webkit-transform-origin:0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.c {
top:0px;
-webkit-transform:rotateX(75deg);
-moz-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.d {
-webkit-transform:translateZ(-60px) translateY(-15px);
-moz-transform: translateZ(-60px) translateY(-15px);
-o-transform: translateZ(-60px) translateY(-15px);
-ms-transform: translateZ(-60px) translateY(-15px);
transform: translateZ(-60px) translateY(-15px);
}
/* colors */
.a, .b {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(116,198,43,0.8)), to(rgba(116,198,43,0.8)));
background-image: -webkit-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
background-image: -moz-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
background-image: -o-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
background-image: linear-gradient(to bottom, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0% 0%;
}
.c, .d {
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(116,198,43,0.5)), to(rgba(116,198,43,0.5)));
background-image:-webkit-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
background-image: -moz-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
background-image: -o-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
background-image: linear-gradient(to bottom, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0% 0%;
}
.c:before {
-webkit-box-shadow:0px 30px 20px -20px rgba(0,0,0,0.4),
0px 40px 15px -15px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 30px 20px -20px rgba(0,0,0,0.4),
0px 40px 15px -15px rgba(0,0,0,0.25);
box-shadow: 0px 30px 20px -20px rgba(0,0,0,0.4),
0px 40px 15px -15px rgba(0,0,0,0.25);
}
.a:before, .b:before, .c:before, .d:before {
background-color:rgba(0,0,0,0.05);
}
.a:after {
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.07)), to(rgba(0,0,0,0)));
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
background-image: -o-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
background-image: linear-gradient(to bottom, rgba(0,0,0,0.07), rgba(0,0,0,0));
}
.b:after {
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.25)));
background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
background-image: -o-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
}
/* jQuery stuff */
#slider-range-min {
position:absolute;
width: 94%;
left:3%;
top:27px;
margin: 0px;
z-index:999;
}
.ui-slider {
height:5px;
border:none;
background:rgba(0,0,0,0.1);
-webkit-box-shadow:0px 2px 2px rgba(255,255,255,0.25),
inset 0px 1px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 2px rgba(255,255,255,0.25),
inset 0px 1px 3px rgba(0,0,0,0.3);
box-shadow: 0px 2px 2px rgba(255,255,255,0.25),
inset 0px 1px 3px rgba(0,0,0,0.3);
}
.ui-slider:before, .ui-slider:after {
content:'IIIIIIIIIII';
position:absolute;
left:2px;
width:100%;
font-family: 'Source Sans Pro', sans-serif;
font-size:1.2rem;
font-weight:300;
color:rgba(0,0,0,0.3);
letter-spacing:41px;
text-shadow:1px 1px 0px rgba(255,255,255,0.2);
}
.ui-slider:before {
top:-1.4rem;
}
.ui-slider:after {
bottom:-1.4rem;
}
.ui-slider-range {background:transparent;}
.ui-slider .ui-slider-handle {
top:-8px;
width:26px;
height:20px;
margin-left:-15px;
padding-left:4px;
border:none;
background:rgba(255,255,255,0.7);
border-radius:2px;
text-align:center;
font-family: 'Anonymous Pro', sans-serif;
font-size:1.2rem;
line-height:20px;
color:rgba(0,0,0,0.5);
text-decoration:none;
letter-spacing:3px;
cursor:pointer;
text-shadow:1px 1px 2px rgba(255,255,255,1);
-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.3);
box-shadow: 1px 1px 8px rgba(0,0,0,0.3);
}
.ui-slider .ui-slider-handle:focus {
outline:none;
}
/* typo */
h1 {
font-size:2.7rem;
font-weight:200;
color:rgba(0,0,0,0.6);
text-shadow:1px 1px 0px rgba(255,255,255,0.3);
}
p {
font-size:1.2rem;
font-weight:300;
line-height:1.8rem;
color:rgba(0,0,0,0.8);
}
.credits a {
position:relative;
display:inline-block;
color:#529e0e;
text-decoration:none;
}
.credits a:after {
content:'';
position:absolute;
left:-1.5%;
bottom:-1px;
width:0%;
height:1px;
background:#529e0e;
-webkit-transition:width 0.1s;
-moz-transition: width 0.1s;
-o-transition: width 0.1s;
transition: width 0.1s;
}
.credits a:hover::after {
width:103%;
}
#amount {
position:relative;
display:inline-block;
padding-bottom:5rem;
text-align:center;
font-family: 'Exo', sans-serif;
font-weight:800;
font-size:4rem;
color:#529e0e;
background:transparent;
border:none;
}
#amount:focus {outline:none;}
/* base */
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100%;
height:100%;
padding-top:5rem;
text-align:center;
}
html, body {
height:100%;
background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.08)), to(rgba(0,0,0,0.05)));
background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
background-image: -o-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
background-image: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
background-repeat:no-repeat;
background-size:100% 100%;
background-position:0% 0%;
font-family: 'Source Sans Pro', sans-serif;
}
</style>
</head>
<body>
<section id="content">
<h1>What is your budget?</h1>
<div class="cube">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div id="slider-range-min"></div>
</div>
<input type="text" id="amount" />
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value + ",000");
$(".a, .b, .c, .d").width(ui.value + "%");
}
});
$(".ui-slider-handle").text("<>");
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value") + ",000");
});
</script>
</body>
</html>
Source Code: https://github.com/animationbro/top-10-custom-animated-range-slider-using-html-css-javascript.git
Subscribe: https://www.youtube.com/@AnimationCoding/featured
#html #css #web-development #programming #developer
8.60 GEEK