slider.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

Slider

The Slider is used to allow users to make selections from a range of values.

Imports

import {
  Slider,
  SliderFilledTrack,
  SliderThumb,
  SliderThumbContainer,
  SliderThumbInput,
  SliderThumbWrapper,
  SliderTrack,
  SliderTrackWrapper,
  SliderWrapper,
} from "@adaptui/react-tailwind";

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => <Slider defaultValue={[50]} ${spreadProps} /> } booleanProps={["tooltip", "isDisabled"]} themeProps={{ size: "slider.size" }} />

Slider sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg & xl.

import { Slider } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Slider size="sm" defaultValue={[50]} />
      <Slider size="md" defaultValue={[50]} />
      <Slider size="lg" defaultValue={[50]} />
      <Slider size="xl" defaultValue={[50]} />
    </div>
  );
};

Slider KnobIcon

The knob icon can be customized by passing a custom icon for the SliderThumb.

import { Slider } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-col space-y-2">
      <Slider size="md" defaultValue={[50]} knobIcon={SliderDefaultKnobIcon} />
    </div>
  );
};

Slider states

Slider can have min and max values, step, isDisabled & formatOptions as well.

<Codeblock live code={`

`} />

Range Slider

Single Slider can be converted to a range slider using range prop.

<Codeblock live code={`

`} />

API Reference

<PropsTable data={[ { name: "size", themeKey: "slider.size", default: "md" }, { name: "isDisabled", type: "boolean", description: "If true, the Slider will be disabled.", default: "false", }, { name: "tooltip", type: "boolean", description: "True, if your slider needs a tooltip.", default: "true", }, { name: "range", type: "boolean", description: "True, if you need a range slider.", default: "false", }, { name: "knobIcon", type: "React.ReactNode", description: "Provide custom icons as a replacement for the default ones.", },

]} />