06 24 2019 dark mode hook2019 06 09 graphql and gatsby2019 06 13 graphql schema definition 101About linkAdd BlogCommit blockCommit block listGridGrid2Header linksHeader logoHomeIndexMy ProfileSidebarTable notesselect-dropbox-root-foldersodebrrr
Flex
General
Layouts
Projects
blogs
Slider Component
Props
Usage
Default values
<Slider defaultValue={50} />
Clickable icons
<Slider defaultValue={10} addIcons/>
Vertical
<Slider defaultValue={50} vertical/>
Controlled Component
()=>{const [val, setVal] = React.useState(50)return (<BorderBox p={3} m={2}><BorderBox p={2} m={2} style={{textAlign:'center'}} width={'100px'} mx={'auto'} color='black'> {val}</BorderBox><Slider value={val} onChange={setVal}/></BorderBox>)}
Examples
Vertical Example
10
30
50
90
90
startSlide and endSlide props
not sliding
20