Slider

A tactile React range control with a liquid thumb.

Slider works with React 18.2 and newer. It supports track clicks, dragging, keyboard input, touch, dark mode and reduced motion. Double-clicking the thumb returns it to the configured reset value. Reaching the maximum value gives the rail one restrained completion shimmer.

Install

npm install elegans-slider

Use it

"use client"

import { useState } from "react"
import { Slider } from "elegans-slider"

export function Example() {
  const [value, setValue] = useState(50)

  return (
    <Slider
      label="Intensity"
      value={value}
      onValueChange={setValue}
      resetValue={50}
    />
  )
}

value and onValueChange make this a controlled component. Your application owns the current value.

Response 50%, Bounce 3% and Stretch 60% are the approved playground defaults. Use move only when you want to tune the feel.

Props

| Prop | Type | Required | Purpose | | --- | --- | --- | --- | | value | number | Yes | Current value. | | onValueChange | (value) => void | Yes | Runs when the value changes. | | label | string | Yes | Accessible name for the slider. | | min | number | No | Minimum value. Defaults to 0. | | max | number | No | Maximum value. Defaults to 100. | | step | number | No | Value interval. Defaults to 1. | | resetValue | number | No | Value restored by double-clicking the thumb. | | formatValue | (value) => string | No | Formats the floating value label and accessible value text. | | showValueTooltip | boolean | No | Shows the floating value label. Defaults to true. | | showMaxGlint | boolean | No | Shows the completion shimmer at the maximum value. Defaults to true. | | size | "default" \| "compact" | No | Uses the standard or compact thumb. | | move | SliderMoveOptions | No | Adjusts response, bounce and stretch. | | className | string | No | Adds a class to the outer element. |

Native range-input attributes such as disabled, name and aria-describedby are also supported.

Styling

The component imports its own CSS. Override these variables on the component or an ancestor to fit it into an existing design system:

.my-slider {
  --liquid-slider-thumb: #171717;
  --liquid-slider-rail: #d8d8d8;
  --liquid-slider-rail-glint: rgba(255, 255, 255, 0.68);
  --liquid-slider-value-surface: #ececec;
  --ink-primary: #171717;
  --focus-ring: #171717;
}

The component follows a surrounding data-theme="light" or data-theme="dark" attribute. Without one, it follows the operating system's colour preference.

Accessibility

• The native range input preserves arrow-key, Home, End and assistive-technology support.
• The visible focus ring appears for keyboard users without appearing on pointer clicks.
• The thumb keeps a larger invisible hit area for touch and mouse input.
• prefers-reduced-motion removes spatial transitions.
• label and the formatted value are exposed to assistive technology.

Licence

MIT