Price Gradient
Here’s a cute little slider with fun bubbles, inspired by this dribbble shot.
We are using some advanced techniques here, let me break them down;
- css gradient for the range-bar
- css variables for the gradient and handle borders
- pop-up both floats when the slider is interactive
- international currency formatting
- custom slide/stop event handling
- psuedo-momentum animations for the float labels
<script>
let slider;
let timer;
let values = [ 2333, 7878 ];
/** set the format of the floating labels */
const currency = new Intl.NumberFormat( "en", { style: 'currency', currency: 'USD', maximumFractionDigits: 0 });
const formatter = (value) => currency.format(value);
const stop = () => {
slider.classList.remove( "up", "down" );
}
/**
* when the slider handle moves, check if it's increasing or decreasing and
* add the appropriate class to the slider (we use css to animate the floating labels)
*/
const slide = (e) => {
const delta = -(e.detail.previousValue - e.detail.value);
if ( delta > 0 ) {
slider.classList.add( "up" );
slider.classList.remove( "down" );
} else {
slider.classList.add( "down" );
slider.classList.remove( "up" );
}
clearTimeout( timer );
// end the animation when movement stops
timer = setTimeout( stop, 66 );
}
</script>
<RangeSlider
id="PriceGradient"
bind:slider
bind:values
range
float
pips
first={false}
last={false}
min={0}
max={10000}
step={1}
pipstep={200}
{formatter}
on:change={slide}
on:stop={stop}
/>
#PriceGradient {
/** colors for the handles and range */
--color1: hsl(219, 73%, 65%);
--color2: hsl(283, 100%, 69%);
--colorMix: color-mix(in hsl, var(--color1), var(--color2));
/** linear springs for nice easing */
--spring-duration: 1.5s;
--spring-easing: linear(
0, 0.576 4%, 0.79, 0.964, 1.102, 1.205, 1.275 13.6%, 1.298, 1.313, 1.32, 1.32,
1.313 19.3%, 1.299 20.7%, 1.256 23.4%, 1.111 30.5%, 1.047 34.2%, 1.018, 0.996,
0.979, 0.968 42.9%, 0.961 46.1%, 0.962 49.7%, 0.994 63.9%, 1.004 72%,
1.005 79.2%, 1
);
/** handle color and shadow */
--color: var(--color1);
--shadow-color: 0deg 0% 0%;
--shadow-handle:
0px 0.4px 0.4px hsl(var(--shadow-color) / 0.1),
0px 0.8px 0.8px -0.8px hsl(var(--shadow-color) / 0.09),
0px 1.6px 1.7px -1.5px hsl(var(--shadow-color) / 0.08),
0px 3.5px 3.6px -2.3px hsl(var(--shadow-color) / 0.08),
0px 6.9px 7.2px -3px hsl(var(--shadow-color) / 0.07);
height: 14px;
}
#PriceGradient .rangeBar {
height: 100%;
background: linear-gradient(90deg in oklch, var(--color1), var(--color2));
}
/** change color for handle 2 */
#PriceGradient .rangeHandle[data-handle="1"] {
--color: var(--color2);
}
/** handle styles */
#PriceGradient .rangeHandle {
width: 34px;
height: 34px;
top: calc( 50% - 1px );
border-radius: 50%;
background: white;
border: 2px solid var(--color);
box-shadow: var(--shadow-handle);
/* perspective for 3D rotation effect of children */
perspective: 500px;
}
/** no need for the 'nub', as styling the handle directly */
#PriceGradient .rangeNub {
display: none;
}
/** floating values over the handles */
#PriceGradient .rangeFloat {
border-radius: .5em;
padding: .3em .6em;
background: white;
color: black;
font-weight: bold;
border: 2px solid var(--color);
line-height: 1.5;
translate: -50% 0% 0.01px;
transform-origin: bottom center;
/* animated properties */
opacity: 0;
transform: translate(0%, -50%) rotateX(100deg) scaleY(0.75);
transition: all var(--spring-easing) var(--spring-duration);
}
/** show the floating values when the slider is focused or hovered */
#PriceGradient.rsFocus .rangeHandle .rangeFloat,
#PriceGradient.rsHoverable .rangeHandle:hover .rangeFloat,
#PriceGradient.rsHoverable:hover .rangeFloat {
opacity: 1;
transform: translate(0%, -50%) rotateX(0deg);
}
/** bottom triangle for the floating values */
#PriceGradient .rangeFloat:after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 9px;
height: 9px;
background: white;
transform: translate(-50%, 50%) rotate(45deg);
border-right: 2px solid var(--color);
border-bottom: 2px solid var(--color);
}
/** move the floating values to the left or right while dragging */
#PriceGradient.up .rangeHandle.rsActive .rangeFloat {
rotate: 0 0 1 -15deg;
}
#PriceGradient.down .rangeHandle.rsActive .rangeFloat {
rotate: 0 0 1 15deg;
}
/** pip styling */
#PriceGradient .rsPip {
height: 2px;
width: 2px;
border-radius: 2px;
box-shadow:
0 0 0px 1px transparent,
0 0 5px transparent,
0 0 2px transparent;
transition: all 0.2s ease-in-out;
}
/** highlight pips when active and in range */
#PriceGradient.rsFocus .rsPip.rsInRange {
background: white;
box-shadow:
0 0 0px 1px var(--colorMix),
0 0 5px var(--colorMix),
0 0 2px var(--colorMix);
}