Ring dial

A dial of fine ticks you turn by angle: the value arc fills behind a bright head that drags a comet tail when you spin it fast.

enhancer
slider
dial
knob
range
input
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

Ring dial example

Brightness

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">Brightness <input type="range" data-motion="ring-dial" min="0" max="100" value="62"></label>

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

<RingDial>Your content</RingDial>

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

<template>
  <RingDial>Your content</RingDial>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "ring-dial";

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

Options

Attribute	Default	What it does
`data-motion-size`	`200`	the dial's width
`data-motion-unit`	`%`	text after the value in the middle

- The real range input stays in the page (visually hidden): it holds the label, the value screen readers announce, the form value and the keys (arrows, Page Up, Page Down, Home, End). The dial is a picture of it, hidden from screen readers. - Pressing on the dial focuses the input and sets the value by angle; dragging round turns it. The gap at the bottom snaps to the nearer end. - Focus draws a ring around the dial. Reduced motion moves the arc at once and drops the tail. 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

ring-dial.js is 1.9 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.