## Examples

### Discrete


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Continuous


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Value input


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Thumb value input


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Actions


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Disabled


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

## Documentation

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="slider"` | `.pf-v6-c-slider__thumb` | Identifies the element as a slider. **Required** |
| `tabindex="0"` | `.pf-v6-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
| `aria-disabled="true"` | `.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
| `aria-valuemin="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
| `aria-valuemax="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
| `aria-valuenow="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the current value of the slider. **Required** |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-slider` | `<div>` | Initiates the slider component. **Required** |
| `.pf-v6-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
| `.pf-v6-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
| `.pf-v6-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
| `.pf-v6-c-slider__steps` | `<div>` | Initiates the slider steps. |
| `.pf-v6-c-slider__step` | `<div>` | Initiates a slider step. |
| `.pf-v6-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
| `.pf-v6-c-slider__step-label` | `<div>` | Initiates a slider step label. |
| `.pf-v6-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
| `.pf-v6-c-slider__value` | `<div>` | Initiates the slider value. |
| `.pf-v6-c-slider__actions` | `<div>` | Initiates the slider actions. |
| `.pf-m-disabled` | `.pf-v6-c-slider` | Modifies the slider for the disabled state. |
| `.pf-m-floating` | `.pf-v6-c-slider__thumb` | Modifies the slider value to float above the thumb. |
| `--pf-v6-c-slider--value` | `.pf-v6-c-slider` | Applies appropriate slider styles based on the current value. **Required** |