Chakra UI Form Slider
Chakra UI Form Slider is the component, where users can make numerical value sections from a range of values. Sliders increase the interaction of users with the application. In real-time, we can embed this Chakra UI Form Slider component in the Shopping application, where users can filter out the item prices by adjusting the prices in the slider. In this article, we will see the practical implementation of various Slider types provided by the Chakra UI Form Slider component.
Prerequisites:
Approach:
We have created various Chakra UI Form Sliders like Basic Slider, Slider having different colors, Vertical Orientation Slider, Customized Slider, Discrete Slider, Slider having custom labels and Marks, and Slider with Tooltip. Users can interact with these sliders by adjusting the values of each slider as per their requirements.
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app my-app
Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:
cd chakra
Step 3: After creating the React application, Install the required package using the following command:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
Project Structure:
The updated dependencies are in the package.json file.
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Below is the practical implementation of the Chakra UI Form Slider.
Javascript
import React, { useState } from 'react' ; import { ChakraProvider, Box, Slider, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, Tooltip, Heading, } from '@chakra-ui/react' ; function App() { const [sValue, set_S_Value] = useState(30); const slideFn = (value) => { set_S_Value(value); }; return ( <ChakraProvider> <Box p={10} textAlign= "center" > <Heading as= "h1" color= "green" > w3wiki </Heading> <Heading as= "h3" > Chakra UI Form Slider Example </Heading> <p style= { { color: 'blue' } }> Basic Slider: </p> <Slider aria-label= "basic-slider" defaultValue={30} colorScheme= "blue" onChange={slideFn}> <SliderTrack> <SliderFilledTrack /> </SliderTrack> <SliderThumb /> </Slider> <p style= { { color: 'pink' } }> Slider with Different Color Scheme: </p> <Slider aria-label= "colorful-slider" defaultValue={30} colorScheme= "pink" onChange={slideFn}> <SliderTrack> <SliderFilledTrack /> </SliderTrack> <SliderThumb /> </Slider> <p style= { { color: 'purple' } }> Vertical Slider: </p> <Slider aria-label= "vertical-slider" defaultValue={30} orientation= "vertical" minH= "200px" onChange={slideFn}> <SliderTrack> <SliderFilledTrack /> </SliderTrack> <SliderThumb /> </Slider> <p style= { { color: 'red' } }> Customized Slider: </p> <Slider aria-label= "customized-slider" defaultValue={30} onChange={slideFn}> <SliderTrack bg= "red.100" > <SliderFilledTrack bg= "tomato" /> </SliderTrack> <SliderThumb boxSize={6}> <Box color= "tomato" fontSize= "lg" > {sValue}% </Box> </SliderThumb> </Slider> <p style= { { color: 'orange' } }>Discrete Slider: </p> <Slider defaultValue={60} min={0} max={300} step={30} onChange={slideFn}> <SliderTrack bg= "red.100" > <SliderFilledTrack bg= "tomato" /> </SliderTrack> <SliderThumb boxSize={6} /> </Slider> <p style= { { color: 'green' } }>Slider with Custom Labels and Marks: </p> <SliderMarkExample /> <p style= { { color: 'teal' } }>Slider with Tooltip: </p> <SliderThumbWithTooltip /> </Box> </ChakraProvider> ); } function SliderMarkExample() { const [sliderValue, setSliderValue] = useState(50); const labelStyles = { mt: '2' , ml: '-2.5' , fontSize: 'sm' , }; return ( <Box p={4} pt={6}> <Slider aria-label= "custom-label-slider" onChange={(val) => setSliderValue(val)}> <SliderMark value={25} {...labelStyles}> 25% </SliderMark> <SliderMark value={50} {...labelStyles}> 50% </SliderMark> <SliderMark value={75} {...labelStyles}> 75% </SliderMark> <SliderMark value={sliderValue} textAlign= "center" bg= "blue.500" color= "white" mt= "-10" ml= "-5" w= "12" > {sliderValue}% </SliderMark> <SliderTrack> <SliderFilledTrack /> </SliderTrack> <SliderThumb /> </Slider> </Box> ); } function SliderThumbWithTooltip() { const [sliderValue, setSliderValue] = useState(5); const [showTooltip, setShowTooltip] = useState( false ); return ( <Slider id= "slider-with-tooltip" defaultValue={5} min={0} max={100} colorScheme= "teal" onChange={(v) => setSliderValue(v)} onMouseEnter={() => setShowTooltip( true )} onMouseLeave={() => setShowTooltip( false )}> <SliderMark value={25} mt= "1" ml= "-2.5" fontSize= "sm" > 25% </SliderMark> <SliderMark value={50} mt= "1" ml= "-2.5" fontSize= "sm" > 50% </SliderMark> <SliderMark value={75} mt= "1" ml= "-2.5" fontSize= "sm" > 75% </SliderMark> <SliderTrack> <SliderFilledTrack /> </SliderTrack> <Tooltip hasArrow bg= "teal.500" color= "white" placement= "top" isOpen={showTooltip} label={`${sliderValue}%`}> <SliderThumb /> </Tooltip> </Slider> ); } export default App; |
Step to run the application:
npm start
Output: Now go to http://localhost:3000 in your browser: