Pikas UI

@pikas-ui/slider

This package contains a slider component that can be used to select a value from a range.

This library is based on Radix Ui.

Change Log

Requirements

To use this package, you must install the @pikas-ui/styles package.

Installation

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/slider

yarn add @pikas-ui/slider

pnpm add @pikas-ui/slider

Usage

Slider

This component is used to select a value from a range. It can be used as a single slider or as a range slider.

Slider label

Eu est labore ea laborum laborum mollit non minim eu commodo.

import { Slider } from '@pikas-ui/slider';

const Example: React.FC = () => {
  return (
    <Slider
      defaultValue={[25]}
      label="Slider label"
      description="Eu est labore ea laborum laborum mollit non minim eu commodo."
    />
  );
};

Props

Prop	Description	Type	Default
`defaultValue`	The initial value of the slider.	`number[]`	-
`onChange`	Callback function that is called when the slider value changes.	`(value: number[]) => void`	-
`id`	The id of the slider.	`string`	-
`label`	The label of the slider.	`string or ReactNode`	-
`textError`	The error text of the slider.	`string`	-
`fontSize`	The font size of the slider.	`PikasFontSize`	`em-base`
`className`	The class name of the slider.	`string`	-
`description`	The description of the slider.	`string`	-
`value`	The value of the slider.	`number[]`	-
`disabled`	If the slider is disabled.	`boolean`	`false`
`min`	The minimum value of the slider.	`number`	`0`
`max`	The maximum value of the slider.	`number`	`100`
`name`	The name of the slider.	`string`	-
`direction`	The direction of the slider.	`SliderDirection`	`ltr`
`orientation`	The orientation of the slider.	`SliderOrientation`	`horizontal`
`step`	The step of the slider.	`number`	`1`
`minStepsBetweenThumbs`	The minimum number of steps between thumbs.	`number`	`1`
`size`	The size of the slider.	`string or number`	`100%`
`maxSize`	The max size of the slider.	`string or number`	`100%`
`minSize`	The min size of the slider.	`string or number`	-
`weight`	The weight of the slider.	`number`	`4`
`thumbSize`	The size of the thumb.	`number`	`16`
`thumbColorName`	The color of the thumb.	`PikasColors`	`"white"`
`thumbColorHex`	The hex color of the thumb.	`string`	-
`thumbBorderColorName`	The color of the thumb border.	`PikasColors`	-
`thumbBorderColorHex`	The color of the thumb border in hexadecimal	`string`	-
`thumbBorderColorNameHover`	The color of the thumb border on hover.	`PikasColors`	`"gray-lighter"`
`thumbBorderColorHoverHex`	The color of the thumb border on hover in hexadecimal.	`string`	-
`thumbBorderWidth`	The width of the thumb border.	`number`	-
`thumbBorderRadius`	The radius of the thumb border.	`PikasRadius`	`"full"`
`trackColorName`	The color of the track.	`PikasColors`	`"gray-lighter"`
`trackColorHex`	The color of the track in hexadecimal.	`string`	-
`rangeColorName`	The color of the range.	`PikasColors`	-
`rangeColorHex`	The color of the range in hexadecimal.	`string`	-
`sliderBorderRadius`	The radius of the slider border.	`PikasRadius`	`"full"`
`css`	The css of the slider.	`SliderCSS`	-
`inverted`	If the slider is inverted.	`boolean`	-
`onValueCommit`	Callback function that is called when the slider value changes.	`(value: number[]) => void`	-

Contributing

This documentation can be edited on GitHub here