Skip to content

Commit 3c9558b

Browse files
tugcekucukoglutugcekucukoglu
authored
Merge pull request #8159 from primefaces/v11-slider
feat: Add Slider
2 parents 4e28fa5 + a31f8d0 commit 3c9558b

33 files changed

Lines changed: 1299 additions & 0 deletions

‎apps/showcase/demo/slider/basic-demo.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Slider } from 'primereact/slider';
2+
3+
export default function BasicDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<Slider defaultValue={50} className="w-56">
7+
<Slider.Range />
8+
<Slider.Thumb />
9+
</Slider>
10+
</div>
11+
);
12+
}

‎apps/showcase/demo/slider/filter-demo.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { SliderChangeEvent } from '@primereact/types/shared/slider';
2+
import type { ToggleButtonGroupValueChangeEvent } from '@primereact/types/shared/togglebutton';
3+
import Image from 'next/image';
4+
import { Slider } from 'primereact/slider';
5+
import { ToggleButton } from 'primereact/togglebutton';
6+
import * as React from 'react';
7+
8+
export default function FilterDemo() {
9+
const [filter, setFilter] = React.useState(0);
10+
const [filterValues, setFilterValues] = React.useState([100, 100, 0]);
11+
12+
const filterStyle = React.useMemo(() => {
13+
return {
14+
filter: `contrast(${filterValues[0]}%) brightness(${filterValues[1]}%) sepia(${filterValues[2]}%)`
15+
};
16+
}, [filterValues]);
17+
18+
return (
19+
<div className="card flex flex-col items-center justify-center">
20+
<Image alt="user header" className="w-80 rounded mb-6" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle} width={320} height={240} />
21+
<ToggleButton.Group value={filter} onValueChange={(e: ToggleButtonGroupValueChangeEvent) => setFilter(e.value as number)}>
22+
<ToggleButton value={0}>
23+
<ToggleButton.Indicator>Contrast</ToggleButton.Indicator>
24+
</ToggleButton>
25+
<ToggleButton value={1}>
26+
<ToggleButton.Indicator>Brightness</ToggleButton.Indicator>
27+
</ToggleButton>
28+
<ToggleButton value={2}>
29+
<ToggleButton.Indicator>Sepia</ToggleButton.Indicator>
30+
</ToggleButton>
31+
</ToggleButton.Group>
32+
<Slider
33+
value={filterValues[filter]}
34+
onValueChange={(e: SliderChangeEvent) =>
35+
setFilterValues((prev) => {
36+
const updated = [...prev];
37+
38+
updated[filter] = e.value as number;
39+
40+
return updated;
41+
})
42+
}
43+
className="w-56 mt-4"
44+
min={0}
45+
max={200}
46+
>
47+
<Slider.Range />
48+
<Slider.Thumb />
49+
</Slider>
50+
</div>
51+
);
52+
}

‎apps/showcase/demo/slider/input-demo.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { SliderChangeEvent } from '@primereact/types/shared/slider';
2+
import { InputText } from 'primereact/inputtext';
3+
import { Slider } from 'primereact/slider';
4+
import * as React from 'react';
5+
6+
export default function InputDemo() {
7+
const [value, setValue] = React.useState(50);
8+
9+
return (
10+
<div className="card flex justify-center">
11+
<div className="w-56">
12+
<InputText value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(Number(e.target.value))} fluid className="mb-4" />
13+
<Slider value={value} onValueChange={(e: SliderChangeEvent) => setValue(e.value as number)} className="w-full">
14+
<Slider.Range />
15+
<Slider.Thumb />
16+
</Slider>
17+
</div>
18+
</div>
19+
);
20+
}

‎apps/showcase/demo/slider/range-demo.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Slider } from 'primereact/slider';
2+
3+
export default function RangeDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<Slider defaultValue={[20, 80]} className="w-56">
7+
<Slider.Range />
8+
<Slider.Thumb />
9+
<Slider.Thumb />
10+
</Slider>
11+
</div>
12+
);
13+
}

‎apps/showcase/demo/slider/slider-pt.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Slider } from 'primereact/slider';
2+
3+
export default function SliderPTDemo() {
4+
return (
5+
<Slider defaultValue={50} className="w-56">
6+
<Slider.Range />
7+
<Slider.Thumb />
8+
</Slider>
9+
);
10+
}

‎apps/showcase/demo/slider/step-demo.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Slider } from 'primereact/slider';
2+
3+
export default function StepDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<Slider defaultValue={20} step={20} className="w-56">
7+
<Slider.Range />
8+
<Slider.Thumb />
9+
</Slider>
10+
</div>
11+
);
12+
}

‎apps/showcase/demo/slider/vertical-demo.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Slider } from 'primereact/slider';
2+
3+
export default function VerticalDemo() {
4+
return (
5+
<div className="card flex justify-center">
6+
<Slider defaultValue={50} orientation="vertical" className="h-56">
7+
<Slider.Range />
8+
<Slider.Thumb />
9+
</Slider>
10+
</div>
11+
);
12+
}

‎apps/showcase/docs/components/slider/api.mdx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Slider API
3+
description: API documentation for Slider component
4+
component: slider
5+
---
6+
7+
## Slider
8+
9+
### Props
10+
11+
<DocTable name="Slider" category="api" type="props" />
12+
13+
### State
14+
15+
<DocTable name="Slider" category="api" type="state" />
16+
17+
### Exposes
18+
19+
<DocTable name="Slider" category="api" type="exposes" />
20+
21+
### Events
22+
23+
<DocTable name="Slider" category="api" type="events" />
24+
25+
### Interfaces
26+
27+
<DocTable name="Slider" category="api" type="interfaces" />
28+
29+
### Types
30+
31+
<DocTable name="Slider" category="api" type="types" />
32+
33+
## SliderRange
34+
35+
### Props
36+
37+
<DocTable name="SliderRange" category="api" type="props" />
38+
39+
### Exposes
40+
41+
<DocTable name="SliderRange" category="api" type="exposes" />
42+
43+
### Interfaces
44+
45+
<DocTable name="SliderRange" category="api" type="interfaces" />
46+
47+
### Types
48+
49+
<DocTable name="SliderRange" category="api" type="types" />
50+
51+
## SliderThumb
52+
53+
### Props
54+
55+
<DocTable name="SliderThumb" category="api" type="props" />
56+
57+
### Exposes
58+
59+
<DocTable name="SliderThumb" category="api" type="exposes" />
60+
61+
### Interfaces
62+
63+
<DocTable name="SliderThumb" category="api" type="interfaces" />
64+
65+
### Types
66+
67+
<DocTable name="SliderThumb" category="api" type="types" />
68+
69+
## useSlider
70+
71+
### Props
72+
73+
<DocTable name="useSlider" category="api" type="props" />
74+
75+
### State
76+
77+
<DocTable name="useSlider" category="api" type="state" />
78+
79+
### Exposes
80+
81+
<DocTable name="useSlider" category="api" type="exposes" />
82+
83+
### Events
84+
85+
<DocTable name="useSlider" category="api" type="events" />
86+
87+
### Types
88+
89+
<DocTable name="useSlider" category="api" type="types" />

‎apps/showcase/docs/components/slider/features.mdx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Slider
3+
description: Slider is a component to provide input with a drag handle.
4+
component: slider
5+
---
6+
7+
## Usage
8+
9+
```tsx
10+
import { Slider } from 'primereact/slider';
11+
```
12+
13+
```tsx
14+
<Slider>
15+
<Slider.Range />
16+
<Slider.Thumb />
17+
</Slider>
18+
```
19+
20+
## Examples
21+
22+
### Basic
23+
24+
Slider requires `Slider.Range` and `Slider.Thumb` components as children.
25+
26+
<DocDemoViewer name="slider:basic-demo" />
27+
28+
### Input
29+
30+
<DocDemoViewer name="slider:input-demo" />
31+
32+
### Step
33+
34+
Size of each movement is defined with the `step` property.
35+
36+
<DocDemoViewer name="slider:step-demo" />
37+
38+
### Range
39+
40+
Slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
41+
42+
<DocDemoViewer name="slider:range-demo" />
43+
44+
### Filter
45+
46+
Image filter implementation using multiple sliders.
47+
48+
<DocDemoViewer name="slider:filter-demo" />
49+
50+
### Vertical
51+
52+
Default layout of slider is `horizontal`, use `orientation` property for the alternative `vertical` mode.
53+
54+
<DocDemoViewer name="slider:vertical-demo" />
55+
56+
## Accessibility
57+
58+
### Screen Reader
59+
60+
Slider element component uses `slider` role on the handle in addition to the `aria-orientation`, `aria-valuemin`, `aria-valuemax` and `aria-valuenow` attributes. Value to describe the component can be defined using `aria-labelledby` and `aria-label` props.
61+
62+
### Keyboard Support
63+
64+
| Key | Function |
65+
| ------------------------ | --------------------------------- |
66+
| tab | Moves focus to the slider. |
67+
| left arrow / up arrow | Decrements the value. |
68+
| right arrow / down arrow | Increments the value. |
69+
| home | Set the minimum value. |
70+
| end | Set the maximum value. |
71+
| page up | Increments the value by 10 steps. |
72+
| page down | Decrements the value by 10 steps. |

‎apps/showcase/docs/components/slider/pt.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: Slider Pass Through
3+
description: Pass Through documentation for Slider component
4+
component: slider
5+
---
6+
7+
## Viewer
8+
9+
Some sections may not be visible due to the availability of the particular feature.
10+
11+
<DocPTViewer name="slider-pt" components={['Slider']} />
12+
13+
## Slider PT Options
14+
15+
<DocTable name="Slider" category="pt" />
16+
17+
## SliderRange PT Options
18+
19+
<DocTable name="SliderRange" category="pt" />
20+
21+
## SliderThumb PT Options
22+
23+
<DocTable name="SliderThumb" category="pt" />

0 commit comments

Comments
 (0)