Code

Props

Props	Data Type	Required
id	string	✅
className	string	❌
label	string	❌
minValue	string	❌
maxValue	string	❌
rangeVisibility	boolean	❌
defaultValue	string	❌
hasInput	boolean	❌
disabled	boolean	❌
error	boolean	❌
errorMessage	string	❌
onChange	function event	❌

Event Response

Property	Data Type
id	string
name	string
label	string
value	string

onChange

import React, {useState} from 'react';
import {Slider} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [sliderValue, setSliderValue] = useState(0);
    
    const updateState = (e)=>{
        setSelectedItem(e.value);
    }
    
    return(
        <div className='container'>
            <Slider 
                id='slider'
                label='Slider Example'
                rangeVisibility
                hasInput
                onChange={updateState} 
            />
        </div>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Label

• TextInput

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Slider - Basic Slider ⋅ Storybooksipster-react-component-storybook.netlify.app