Netzo Logo

slider

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

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { Slider } from 'netzo/components/slider.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { type ComponentProps } from "preact/compat";
import { cn } from "netzo/components/utils.ts";
import { Slider } from "netzo/components/slider.tsx";

type SliderProps = ComponentProps<typeof Slider>;

export default ({ className, ...props }: SliderProps) => {
  return (
    <Slider
      defaultValue={[50]}
      max={100}
      step={1}
      className={cn("w-[60%]", className)}
      {...props}
    />
  );
};