Value Slider

A slider you can drag or tap. Touching the track jumps the thumb there; grabbing the thumb moves it without a jump. The thumb grows while held and a bubble above it reads out the value, which snaps to step and stays within min and max. Screen readers get an adjustable control with increment and decrement actions. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add value-slider

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/value-slider.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { ValueSlider } from "@/components/ui/value-slider";

export default function Example() {
  const [volume, setVolume] = useState(40);

  return (
    <ValueSlider
      label="Volume"
      value={volume}
      onValueChange={setVolume}
      onSlidingComplete={(final) => console.log("saved", final)}
    />
  );
}

The slider fills the width of its parent.

Props