mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
751ef5c778
Both old names are owned by a different npm account (artemis-prime), so publishing them returns 403 — which is how this surfaced: the 8.0.0 run shipped @hanzogui/logo and @hanzogui/demos depending on [email protected], a version that cannot be published and therefore does not exist. Those two were uninstallable. @hanzo/gui and @hanzogui/* are ours, so the framework now carries the name it is imported by everywhere downstream, and the loader moves under the scope we control. The rewrite is limited to package references. `DEBUG?.startsWith('hanzogui')` is a log-namespace filter and join(dir, 'hanzogui') is a path — rewriting either would change behaviour, so both are untouched. Co-authored-by: Hanzo Dev <[email protected]>
181 lines
3.8 KiB
Plaintext
181 lines
3.8 KiB
Plaintext
---
|
|
title: Slider
|
|
description: A simple slider component
|
|
name: slider
|
|
component: Slider
|
|
package: slider
|
|
demoName: Slider
|
|
---
|
|
|
|
# Slider
|
|
|
|
<Description>Drag to set values, vertically or horizontally</Description>
|
|
|
|
<HeroContainer>
|
|
<SliderDemo />
|
|
</HeroContainer>
|
|
|
|
```tsx hero template=Slider
|
|
|
|
```
|
|
|
|
<Highlights
|
|
features={[
|
|
`Sizable, themed, works controlled or uncontrolled.`,
|
|
`Multiple thumbs support.`,
|
|
`Control steps and control with your keyboard.`,
|
|
`Accessible, easy to compose and customize.`,
|
|
]}
|
|
/>
|
|
|
|
## Installation
|
|
|
|
Slider is already installed in `hanzogui`, or you can install it independently:
|
|
|
|
```bash
|
|
npm install @hanzogui/slider
|
|
```
|
|
|
|
## Usage
|
|
|
|
Slider comes as multiple components that ship with default styles and are sizable. The `size` prop on `<Slider />` will automatically pass size down to all the sub-components.
|
|
|
|
```tsx
|
|
import { Slider } from '@hanzo/gui'
|
|
|
|
export default () => (
|
|
<Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
|
|
<Slider.Track>
|
|
<Slider.TrackActive />
|
|
</Slider.Track>
|
|
<Slider.Thumb circular index={0} />
|
|
</Slider>
|
|
)
|
|
```
|
|
|
|
You can also optionally style any component, either using inline style props or by wrapping with `styled`:
|
|
|
|
```tsx
|
|
import { Slider, styled } from '@hanzo/gui'
|
|
|
|
const CustomSliderTrack = styled(Slider.Track, {
|
|
backgroundColor: 'red',
|
|
})
|
|
|
|
export default () => (
|
|
<Slider size="$4" width={200} defaultValue={[50]} max={100} step={1}>
|
|
<CustomSliderTrack>
|
|
<Slider.TrackActive />
|
|
</CustomSliderTrack>
|
|
<Slider.Thumb circular index={0} />
|
|
</Slider>
|
|
)
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Slider
|
|
|
|
Contains every component for the slider.
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'size',
|
|
required: false,
|
|
type: 'SizeTokens',
|
|
description: `Control size of every component.`,
|
|
},
|
|
{
|
|
name: 'name',
|
|
required: false,
|
|
type: 'string',
|
|
description: `For usage with forms.`,
|
|
},
|
|
{
|
|
name: 'value',
|
|
required: false,
|
|
type: 'number[]',
|
|
description: `Controlled value.`,
|
|
},
|
|
{
|
|
name: 'defaultValue',
|
|
required: false,
|
|
type: 'number[]',
|
|
description: `Uncontrolled starting value.`,
|
|
},
|
|
{
|
|
name: 'onValueChange',
|
|
required: false,
|
|
type: '(value: number[]): void',
|
|
description: ``,
|
|
},
|
|
{
|
|
name: 'disabled',
|
|
required: false,
|
|
type: 'boolean',
|
|
description: `Disable interaction.`,
|
|
},
|
|
{
|
|
name: 'orientation',
|
|
required: false,
|
|
type: `"horizontal" | "vertical"`,
|
|
default: 'horizontal',
|
|
description: `Direction of the slider.`,
|
|
},
|
|
{
|
|
name: 'dir',
|
|
required: false,
|
|
type: '"ltr" | "rtl"',
|
|
description: `Controls the side the active track appears on.`,
|
|
},
|
|
{
|
|
name: 'min',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Minimum value.`,
|
|
},
|
|
{
|
|
name: 'max',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Maximum value.`,
|
|
},
|
|
{
|
|
name: 'step',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Minimum thumb move distance.`,
|
|
},
|
|
{
|
|
name: 'minStepsBetweenThumbs',
|
|
required: false,
|
|
type: 'number',
|
|
description: `Minimum steps between thumbs.`,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
### Slider.Track
|
|
|
|
`Slider.Track` Inherits `SizableStack`, extending all the default [props](/docs/intro/props).
|
|
|
|
### Slider.TrackActive
|
|
|
|
`Slider.Track` Inherits `Stack`, extending all the default [props](/docs/intro/props).
|
|
|
|
### Slider.Thumb
|
|
|
|
`Slider.Track` Inherits `SizableStack`, extending all the default [props](/docs/intro/props), adding:
|
|
|
|
<PropsTable
|
|
data={[
|
|
{
|
|
name: 'index',
|
|
required: true,
|
|
type: 'number',
|
|
description: `Corresponds to the index of \`value\` or \`defaultValue\`. Use to correlate thumbs to each value in the array.`,
|
|
},
|
|
]}
|
|
/>
|