Default

Stepped

Steps can be used for larger increments.

Range slider

Sliders can be used to specify a range of values with multiple "handles".

Range with minimum distance

You can set a minimum distance between the minimum and maximum range values.

Non-integer values

For non-integer values, it's necessary to use the ariaLabel and ariaValuetext props to provide assistive technology with meaningful values.

                                                
                                                import { Component } from 'react';
                                                import BpkSlider from '@skyscanner/backpack-web/bpk-component-slider';
                                                
                                                const Slider = () => (
                                                  <BpkSlider
                                                    min={0}
                                                    max={100}
                                                    value={[20, 80]}
                                                    step={10}
                                                    className={'my-class-name'}
                                                    onChange={(value) => alert('Actual value: ' + value)}
                                                  />
                                                );

Props