Interactive Range Slider with Tooltip Using Pure CSS

Category: CSS & CSS3 , Form | June 5, 2024
Author:t_afif
Views Total:64 views
Official Page:Go to website
Last Update:June 5, 2024
License:MIT

Preview:

Interactive Range Slider with Tooltip Using Pure CSS

Description:

This is a sleek and functional range slider built entirely with CSS and HTML range input.

Users can easily select values within a defined range by dragging the thumb, and the tooltip dynamically updates to display the selected value.

It’s ideal for scenarios where you want to provide fine-tuned control without the complexity of additional libraries or frameworks.

How to use it:

1. Build the HTML structure for the range slider. The code below defines a label element containing an input element of type “range” and an output element. The input element defines the range properties (min, max, step, and initial value). The output element is linked to the input using the “for” attribute and will display the selected value.

<label>
  <input type="range" id="one" min="0" max="100" step="1" value="50">
  <output for="one" style="--min: 0;--max: 100"></output>
</label>

2. Apply the CSS styles to customize the appearance of your range slider. This CSS code below defines various custom properties (using --) to control the slider’s appearance, including color, gap, line thickness, thumb size, tooltip tail size, and tooltip radius. The code also utilizes CSS properties like timeline-scope, translate, and view-timeline to create the smooth animation and positioning of the tooltip.

@property --val {
  syntax: '';
  inherits: true;
  initial-value: 0; 
}
label {
  --c: #547980; /* slider color */
  --g: round(.3em,1px);  /* the gap */
  --l: round(.2em,1px);  /* line thickness*/
  --s: round(1.3em,1px); /* thumb size*/
  --t: round(.8em,1px);  /* tooltip tail size */
  --r: round(.8em,1px);  /* tooltip radius */
  
  timeline-scope: --thumb-view;
  translate: 0; /* No, It's not useless so don't remove it (or remove it and see what happens) */ 
  font-size: 24px;
}
input {
  width: 400px;
  height: var(--s); /* needed for Firefox*/
  --_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
  appearance :none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  font-size: inherit;
}
input:focus-visible,
input:hover{
  --p: 25%;
}
input:active,
input:focus-visible{
  --_b: var(--s)
}
/* chromium */
input[type="range" i]::-webkit-slider-thumb{
  height: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -webkit-appearance: none;
  appearance: none;
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
  view-timeline-inset: var(--s);
}
/* Firefox */
input[type="range"]::-moz-range-thumb {
  height: var(--s);
  width: var(--s);
  background: none;
  border-radius: 50%;
  box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
  border-image: linear-gradient(90deg,var(--_c) 50%,#ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
  -moz-appearance: none;
  appearance: none;
  transition: .3s;
  anchor-name: --thumb;
  view-timeline: --thumb-view inline;
  view-timeline-inset: var(--s);
}
output {
  position-anchor: --thumb;
  position: absolute;
  inset-area: top span-all;
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  padding-block: .5em;
  width: 4em;
  background: #CC333F;
  --val:var(--min);
  border-bottom: var(--t) solid #0000;
  border-radius: var(--r)/var(--r) var(--r) calc(var(--r) + var(--t)) calc(var(--r) + var(--t));
  --_m: 100%/var(--t) var(--t) no-repeat;
  --_g: 100%,#0000 99%,#000 102%;
  mask:
    linear-gradient(#000 0 0) padding-box,
    radial-gradient(100% 100% at 100% var(--_g)) calc(50% + var(--t)/2) var(--_m),
    radial-gradient(100% 100% at 0    var(--_g)) calc(50% - var(--t)/2) var(--_m);
  animation: range linear;
  animation-timeline: --thumb-view;
}
output.bottom {
  inset-area: bottom span-all;
  border-top: var(--t) solid #0000;
  border-bottom: none;
  border-radius: var(--r)/calc(var(--r) + var(--t)) calc(var(--r) + var(--t)) var(--r) var(--r);
  --_m: 0%/var(--t) var(--t) no-repeat;
  --_g: 0%,#0000 99%,#000 102%;
}
output:before {
  content: counter(num);
  counter-reset: num var(--val);
}
@keyframes range {
  0% {background: #8A9B0F;--val:var(--max)}
}
@supports not (anchor-name: ---) {
  output {
    display: none;
  }
}

You Might Be Interested In:


Leave a Reply