Tick slider

A range slider drawn as a row of fine bars with no thumb; dragging fast raises a wake of taller bars around the handle that settles behind it.

enhancer
slider
range
input
bars
wake
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Tick slider example

Volume

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<label class="demo-card">Volume <input type="range" data-motion="tick-slider" min="0" max="100" value="62"></label>

import { TickSlider } from "./motion/react/TickSlider";

<TickSlider>Your content</TickSlider>

<script setup lang="ts">
import TickSlider from "./motion/vue/TickSlider.vue";
</script>

<template>
  <TickSlider>Your content</TickSlider>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "tick-slider";

The wrappers: TickSlider.tsx (React, TypeScript) and TickSlider.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-bars`	`44`	how many bars make the track
`data-motion-wake`	`1`	how tall the wake grows with speed (0: none)
`data-motion-unit`	auto	text after the shown value, such as %

- The real range input stays in place over the bars, invisible but live: it keeps its label, arrow keys, Page Up and Page Down, Home and End, form value and the value screen readers announce. The bars and the number beside them are hidden from screen readers. - Focus draws a ring around the bars. - Reduced motion keeps every bar its own height; the lit bars still follow the value. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

tick-slider.js is 1.2 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.