mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
b9e12aedf1
* build: add radix ui slider dependency * feat(ui): implement slider component * docs: add documentation for slider component * feat(ui): enhance Slider with antd-compatible API (range, marks, tooltips, events) * refactor: rename the title to Components/Slider * refactor: add missing props * docs: add Common props section * refactor(slider): minor fixes and improvements * docs(readme): add missing export on readme --------- Co-authored-by: Vinícius Lourenço <[email protected]>
101 lines
2.4 KiB
Plaintext
101 lines
2.4 KiB
Plaintext
import { Meta, Controls, Primary, Story } from '@storybook/addon-docs/blocks';
|
|
import * as SliderStories from './slider.stories';
|
|
|
|
<Meta of={SliderStories} />
|
|
|
|
# Slider
|
|
|
|
An input where the user selects a value from within a given range. This component serves as a drop-in replacement for the Ant Design Slider, supporting legacy props while utilizing `@radix-ui/react-slider` primitives under the hood.
|
|
|
|
## How to use
|
|
|
|
```tsx
|
|
import { Slider } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
return <Slider defaultValue={50} max={100} step={1} />;
|
|
}
|
|
```
|
|
|
|
This code above will render the following slider:
|
|
|
|
<Primary />
|
|
|
|
<Controls of={SliderStories.Default} />
|
|
|
|
## Ant Design Compatibility
|
|
|
|
This component maps common Ant Design `Slider` props to their Radix UI equivalents seamlessly.
|
|
|
|
### Events
|
|
|
|
- **`onChange`**: Fired when the value changes during dragging. Maps to Radix's `onValueChange`.
|
|
- **`onAfterChange`**: Fired when `mouseup` or `keyup` happens. Maps to Radix's `onValueCommit`.
|
|
|
|
### Range Slider
|
|
|
|
To use a dual-thumb range slider, set the `range` prop to `true` and provide an array of values.
|
|
|
|
```tsx
|
|
<Slider range defaultValue={[25, 75]} />
|
|
```
|
|
|
|
<Story of={SliderStories.Range} />
|
|
|
|
### Marks
|
|
|
|
You can provide a `marks` object to display tick marks along the track. The key should be a number, and the value can be a string or a React node.
|
|
|
|
```tsx
|
|
const marks = {
|
|
0: '0°C',
|
|
26: '26°C',
|
|
37: '37°C',
|
|
100: {
|
|
style: { color: '#f50' },
|
|
label: <strong>100°C</strong>,
|
|
},
|
|
};
|
|
|
|
<Slider marks={marks} defaultValue={37} />
|
|
```
|
|
|
|
<Story of={SliderStories.WithMarks} />
|
|
|
|
### Tooltips
|
|
|
|
By providing a `tooltip` prop with a `formatter`, the slider thumbs will be wrapped in tooltips displaying the current value.
|
|
|
|
```tsx
|
|
<Slider tooltip={{ formatter: (val) => `${val}%` }} defaultValue={25} />
|
|
```
|
|
|
|
<Story of={SliderStories.WithTooltip} />
|
|
|
|
### Custom Styles
|
|
|
|
You can inject inline styles directly into the internal Radix parts using the `styles` prop:
|
|
|
|
```tsx
|
|
<Slider
|
|
styles={{
|
|
track: { backgroundColor: '#ffe4e6' },
|
|
range: { backgroundColor: '#e11d48' },
|
|
thumb: { borderColor: '#e11d48' },
|
|
}}
|
|
/>
|
|
```
|
|
|
|
<Story of={SliderStories.CustomStyles} />
|
|
### Common Props
|
|
|
|
You can also pass standard HTML attributes like `id` and `style`, or a `testId` for testing purposes.
|
|
|
|
```tsx
|
|
<Slider
|
|
id="price-range"
|
|
testId="price-slider"
|
|
style={{ marginTop: '20px' }}
|
|
/>
|
|
```
|