ReactJS UI Ant Design Slider Component - GeeksforGeeks

21 May, 2021
Ant Design Library has this component pre-built, and it is very easy to integrate as well. Slider Component to used when the users want to make selections from a range of values. We can use the following approach in ReactJS to use the Ant Design Slider Component.
Slider Methods:
blur(): This method is used to remove the focus from the element.
focus(): This method is used to get the focus on the element.
Slider Props:
autoFocus: It is used to get the focus when the component is mounted.
defaultValue: It is used as the default value of the slider.
disabled: It is used to disable the slider.
dots: It is used to indicate whether the thumb can drag over tick only or not.
getTooltipPopupContainer: It is used for the DOM container of the Tooltip.
included: It is used to make an effect when marks not null.
marks: It is used to define the tick mark of the slider.
max: It is used to denote the maximum value the slider can slide.
min: It is used to denote the minimum value the slider can slide.
range: It is used for the dual thumb mode.
reverse: It is used to reverse the component.
step: It is used to indicate the granularity the slider can step through values.
tipFormatter: It is used for the slider so that it will pass its value to tipFormatter.
tooltipPlacement: It is used to set Tooltip display position.
tooltipVisible: It is used to indicate whether to show Tooltip or not.
value: It is used to denote the value of the slider.
vertical: It is used to indicate whether to set the slider vertical or not.
onAfterChange: It is a callback function that is triggered when onmouseup event is fired.
onChange: It is a callback function that is triggered when the user changes the slider’s value.
Range Props:
draggableTrack: It is used to indicate whether the range track can be drag or not.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:npx create-react-app foldername
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:npm install antd
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React, { useState } from 'react'import "antd/dist/antd.css";import { Slider } from 'antd';  export default function App() {    // State to hold our current value  const [currentValue, setCurrentValue] = useState(0)    return (    <div style={{      display: 'block', width: 700, padding: 30    }}>      <h4>ReactJS Ant-Design Slider Component</h4>      <Slider defaultValue={0} disabled={false} max={100} onChange={(value)=> {        setCurrentValue(value)      }}/>      Slider Value: {currentValue}    </div>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/slider/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills