Slider

An input where the user selects a value or multiple values from within a given range.

Anatomy

import { Radio } from "@lualtek/react-components";
 
export default () => {
  return <Slider defaultValue={[30, 50]} />;
};

API Reference

This component extends the radix-ui Slider (opens in a new tab) component, which exposes different props that enables multiple functionalities, and adds the following:

export type SliderProps = {
  /**
   * Show values beside the thumbs
   */
  showValues?: boolean;
 
  /**
   * Show custom value label instead of raw value
   */
  valueLabel?: (value: number) => string;
 
  /**
   * Assign a label to the input.
   */
  label?: ReactNode;
};

Select Switch