Slider

The Slider component is an interactive control for selecting numeric values in a range from 0 to 100. It offers an intuitive drag-and-drop interface, ideal for settings like volume, brightness, opacity, or any value that benefits from continuous visual adjustment.

tsx

import { Slider, useSlider } from "@arkyn/components";

Basic usage

Basic usage requires the value and onChange properties. The component is always controlled.

tsx

const [value, setValue] = useSlider(25);
<Slider value={value} onChange={setValue} />;

Disabled slider

Disabled slider at 60%

tsx

const [value, setValue] = useSlider(25);
<Slider value={value} onChange={setValue} disabled />;

onDragging callback

Use the onDragging callback to detect when the user is dragging the slider.

tsx

const [value, setValue] = useSlider(50);
const [isDragging, setIsDragging] = useState(false);

const handleDragging = (dragging) => {
  setIsDragging(dragging);

  if (dragging) {
    console.log("Started dragging");
    // Pause automatic updates
    // Show tooltip with value
  } else {
    console.log("Finished dragging");
    // Resume updates
    // Save final value
  }
};

<Slider value={value} onChange={setValue} onDragging={handleDragging} />;

Value conversions

The Slider works with values from 0-100, but you can easily convert to other ranges:

tsx

// Convert to specific range
function convertRange(value: number, min: number, max: number) {
  return (value / 100) * (max - min) + min;
}

// Convert back to 0-100
function convertToSlider(value: number, min: number, max: number) {
  return ((value - min) / (max - min)) * 100;
}

// Example: Slider for price ($10 to $500)
const [priceSliderValue, setPriceSliderValue] = useSlider(20); // 20% = $108
const actualPrice = convertRange(priceSliderValue, 10, 500);

<div>
  <label>Price: {actualPrice.toFixed(2)}</label>
  <Slider value={priceSliderValue} onChange={setPriceSliderValue} />
</div>;

Properties

value - number (required) Current slider value (0-100)

onChange - (value: number) => void (required) Callback function called when the value changes

disabled - boolean (default: false) Whether the slider is disabled

onDragging - (value: boolean) => void Callback function called when the drag state changes

className - string Additional CSS classes for styling

Other properties

All other standard HTML properties of div are also supported, except onChange which is controlled by the component.

Notes

Valid values are in the range from 0 to 100
Use conversions to work with other numeric ranges
The onDragging callback is useful for performance optimizations
Prefer useSlider over useState to ensure consistency and prevent validation bugs

On this page