About this set
Sliders whose positions stand for words or plans rather than raw numbers. Rating with stars asks how a stay was on a five-point scale, fills the stars up to the chosen point and prints Poor, Fair, Good, Great or Superb under the track, with the current word highlighted. Segmented size picker hides a range input inside a tall track with the sizes XS to XXL printed on it, and the thumb is a violet pill that slides under the chosen size, which then turns white. Pricing by team size is the pricing page pattern: six seat tiers from 5 to 250 on a slider, with a large monthly price and the price per seat recalculated as it moves. Each is a real range input with step=”1″ whose positions index a list in data-labels. The script writes the word into the output and into aria-valuetext, sets –p for the fill and marks the matching stars and labels with a data-on attribute, and for the pricing slider it reads data-seats and data-prices. Use it when a value has a name, when steps are uneven, or when a number alone would mean little.
What’s included
- Word labels from a data-labels list
- Stars that fill up to the chosen rating
- Segmented size picker with the labels inside the track
- Pricing slider with monthly and per-seat price
- aria-valuetext such as 4 of 5, Great
Accessibility
Screen readers hear the word, not the index: the script sets aria-valuetext to values such as 4 of 5, Great or 25 seats, $250 per month. Stars and printed labels are aria-hidden because the input already exposes the value. Each slider has a visible label, works with the arrow keys and shows a focus ring on the thumb. The star colour change is the only transition and it is removed under prefers-reduced-motion.
Customise it
On .st change --st-accent, --st-track, --st-thumb and --st-h (plain CSS and Bootstrap) or the --color-st-* theme colours in Tailwind. Edit the words in data-labels, and the tiers in data-seats and data-prices, keeping min, max and the number of printed labels in step.
