package.docs.components.Slider.examples.Slider.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: 'Slider'
section: components
cssPrefix: pf-v6-c-slider
---## Examples

### Discrete

```html

  
    
      
    
    
      
        
        0
      
      
        
      
      
        
        2
      
      
        
      
      
        
        4
      
      
        
      
      
        
        6
      
      
        
      
      
        
        8
      
    
    
  


```

### Continuous

```html

  
    
      
    
    
  



  
    
      
    
    
      
        
        0%
      
      
        
        100%
      
    
    
  


```

### Value input

```html

  
    
      
    
    
      
        
        0
      
      
        
      
      
        
        2
      
      
        
      
      
        
        4
      
      
        
      
      
        
        6
      
      
        
      
      
        
        8
      
    
    
  
  
    
      
    
  






  
    
      
    
    
      
        
        0%
      
      
        
      
      
        
        50%
      
      
        
      
      
        
        100%
      
    
    
  
  
    
      
        
          
        
      
      
        %
      
    
  






  
    
      
    
    
  
  
    
      
        
          
        
      
      
        %
      
    
  


```

### Thumb value input

```html

  
    
      
    
    
    
      
        
          
            
          
        
        
          %
        
      
    
  


```

### Actions

```html

  
    
  
  
    
      
    
    
  
  
    
  








  
    
      
    
    
    
      
        
          
            
          
        
        
          %
        
      
    
  
  
    
  








  
    
      
    
    
    
      
        
          
            
          
        
        
          %
        
      
    
  
  
    
  


```

### Disabled

```html

  
    
      
    
    
      
        
        0
      
      
        
      
      
        
        2
      
      
        
      
      
        
        4
      
      
        
      
      
        
        6
      
      
        
      
      
        
        8
      
    
    
  








  
    
      
    
    
      
        
        0%
      
      
        
      
      
        
        50%
      
      
        
      
      
        
        100%
      
    
    
  
  
    
      
        
          
        
      
      
        %
      
    
  


```

## 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` | `` | Initiates the slider component. **Required** |
| `.pf-v6-c-slider__main` | `` | Initiates the slider main element. **Required** |
| `.pf-v6-c-slider__rail` | `` | Initiates the slider rail. **Required** |
| `.pf-v6-c-slider__rail-track` | `` | Initiates the slider rail track. **Required** |
| `.pf-v6-c-slider__steps` | `` | Initiates the slider steps. |
| `.pf-v6-c-slider__step` | `` | Initiates a slider step. |
| `.pf-v6-c-slider__step-tick` | `` | Initiates a slider step tick. |
| `.pf-v6-c-slider__step-label` | `` | Initiates a slider step label. |
| `.pf-v6-c-slider__thumb` | `` | Initiates the slider thumb. **Required** |
| `.pf-v6-c-slider__value` | `` | Initiates the slider value. |
| `.pf-v6-c-slider__actions` | `` | 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** |