dual-range-slider.tsx

Overview

dual-range-slider.tsx defines two React components, DualRangeSlider and SingleFormSlider, which provide customizable range slider UI elements built atop the @radix-ui/react-slider primitive components. These components facilitate selecting one or two numeric values within a defined range, with support for custom labels and flexible positioning. The file leverages Radix UI's accessibility and behavior features while adding styling and label rendering logic.

• DualRangeSlider: A slider with one or two thumbs allowing selection of a numeric range or single value.

• SingleFormSlider: A wrapper around DualRangeSlider specialized for single-value sliders, simplifying usage in controlled form scenarios.

Both components forward refs and support a wide range of props inherited from Radix's Slider root component.

Component Details

DualRangeSlider

Description

DualRangeSlider is a React forwardRef component that renders a horizontal slider with two thumbs by default, allowing users to select a numeric range. It can also handle single-value sliders by passing a single value array. The component supports optional labels displayed either above or below each thumb.

Props

Usage Example

<DualRangeSlider
  min={0}
  max={100}
  value={[20, 80]}
  onValueChange={(values) => console.log(values)}
  label={(val) => `${val}%`}
  labelPosition="bottom"
/>

Implementation Details

• Uses SliderPrimitive.Root as the container for the slider.

• The slider track and range are styled using Tailwind CSS classes.

• The initialValue is determined from the value prop (if array) or falls back to [min, max].

• For each value (thumb), renders a SliderPrimitive.Thumb with an optional label.

• Labels are absolutely positioned relative to the thumb based on labelPosition.

• Class names are combined using a utility function cn.

• Accessibility and keyboard navigation are inherited from Radix UI Slider primitives.

SingleFormSlider

Description

SingleFormSlider is a controlled single-thumb slider component that wraps DualRangeSlider. It simplifies usage for single-value sliders by abstracting away the array value format and managing the onChange handler.

Props

Usage Example

<SingleFormSlider
  min={0}
  max={50}
  value={25}
  onChange={(val) => setValue(val)}
/>

Implementation Details

• Passes the single value as a one-element array [value] to DualRangeSlider.

• Handles onValueChange from DualRangeSlider by extracting the first element and calling onChange.

• Forwards refs seamlessly.

Important Implementation Details

• Ref forwarding enables parent components to directly access the underlying DOM node or Radix Slider instance.

• Label rendering uses a render prop to maximize flexibility — any React node can be shown.

• The slider track and thumbs are styled with Tailwind CSS utility classes, ensuring a consistent design system.

• The component supports both controlled and uncontrolled modes via Radix props.

• The dual-thumb slider dynamically renders thumbs based on the length of the value array, supporting both single and dual thumb sliders flexibly.

• Disabled state styles and focus-visible outlines are managed via Radix UI classes and custom Tailwind CSS.

Interaction with Other System Parts

• Depends on the @radix-ui/react-slider package for core slider functionality, accessibility, and keyboard interaction.

• Uses a utility function cn from @/lib/utils which presumably merges class names conditionally.

• Intended to be part of a UI library or design system in a React-based web application.

• Can be used in forms or settings panels where numeric input ranges are required.

• Likely interacts with state management or form libraries in parent components via value and onValueChange props.

Visual Diagram

componentDiagram
    component DualRangeSlider {
      +props: DualRangeSliderProps
      +render()
    }
    component SingleFormSlider {
      +props: SingleSliderProps
      +render()
    }
    component SliderPrimitive.Root
    component SliderPrimitive.Track
    component SliderPrimitive.Range
    component SliderPrimitive.Thumb

    DualRangeSlider --> SliderPrimitive.Root
    DualRangeSlider --> SliderPrimitive.Track
    DualRangeSlider --> SliderPrimitive.Range
    DualRangeSlider --> SliderPrimitive.Thumb

    SingleFormSlider --> DualRangeSlider

Summary

This file provides flexible and accessible range slider components built on Radix UI primitives. The DualRangeSlider supports dual-thumb ranges with customizable labels, while SingleFormSlider simplifies single-value slider use cases. Both use modern React patterns (forwardRef, render props) and integrate seamlessly with the Radix UI ecosystem and Tailwind CSS styling conventions.