ReactJS Blueprint Slider Component

08 Apr, 2022
BlueprintJS is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications.
Slider Component provides a way for users to choose numbers between lower and upper bounds. We can use the following approach in ReactJS to use the ReactJS Blueprint Slider Component.
Slider Props:
className: It is used to denote a space-delimited list of class names to pass along to a child element.
disabled: It is used to indicate whether the slider is non-interactive.
initialValue: It is used to denote the initial value of the slider.
intent: It is used to denote the visual intent color to apply to the element.
labelPrecision: It is used to denote the number of decimal places to use when rendering label value.
labelRenderer: It is a callback function to render a single label.
labelStepSize: It is used for the increment between successive labels.
labelValues: It is used to denote the array of specific values for the label placement.
max: It is used to denote the maximum value of the slider.
min: It is used to denote the minimum value of the slider.
onChange: It is a callback function that is triggered when the value changes.
onRelease: It is a callback function that is triggered when the handle is released.
showTrackFill: It is used to indicate whether a solid bar should be rendered on the track between current and initial values, or between handles for RangeSlider.
stepSize: It is used for the increment between successive values.
value: It is used to denote the value of the slider.
vertical: It is used to indicate whether to show the slider in a vertical orientation.
RangeSlider Props:
className: It is used to denote a space-delimited list of class names to pass along to a child element.
disabled: It is used to indicate whether the slider is non-interactive.
intent: It is used to denote the visual intent color to apply to the element.
labelPrecision: It is used to denote the number of decimal places to use when rendering label value.
labelRenderer: It is a callback function to render a single label.
labelStepSize: It is used for the increment between successive labels.
labelValues: It is used to denote the array of specific values for the label placement.
max: It is used to denote the maximum value of the slider.
min: It is used to denote the minimum value of the slider.
onChange: It is a callback function that is triggered when the value changes.
onRelease: It is a callback function that is triggered when the handle is released.
showTrackFill: It is used to indicate whether a solid bar should be rendered on the track between current and initial values, or between handles for RangeSlider.
stepSize: It is used for the increment between successive values.
value: It is used to denote the value of the slider.
vertical: It is used to indicate whether to show the slider in a vertical orientation.
 
MultiSlider Props:
className: It is used to denote a space-delimited list of class names to pass along to a child element.
defaultTrackIntent: It is used to denote the default intent of a track segment.
disabled: It is used to indicate whether the slider is non-interactive.
intent: It is used to denote the visual intent color to apply to the element.
labelPrecision: It is used to denote the number of decimal places to use when rendering label value.
labelRenderer: It is a callback function to render a single label.
labelStepSize: It is used for the increment between successive labels.
labelValues: It is used to denote the array of specific values for the label placement.
max: It is used to denote the maximum value of the slider.
min: It is used to denote the minimum value of the slider.
onChange: It is a callback function that is triggered when the value changes.
onRelease: It is a callback function that is triggered when the handle is released.
showTrackFill: It is used to indicate whether a solid bar should be rendered on the track between current and initial values, or between handles for RangeSlider.
stepSize: It is used for the increment between successive values.
vertical: It is used to indicate whether to show the slider in a vertical orientation.
Handle Props:
className: It is used to denote a space-delimited list of class names to pass along to a child element.
intentAfter: It is used to denote the intent for the track segment immediately after this handle.
intentBefore: It is used to denote the intent for the track segment immediately before this handle.
interactionKind: It is used to denote how this handle interacts with other handles.
onChange: It is a callback function that is triggered when the value changes.
onRelease: It is a callback function that is triggered when the handle is released.
trackStyleAfter: It is used to denote the style to use for the track segment immediately after this handle.
trackStyleBefore: It is used to denote the style to use for the track segment immediately before this handle.
type: It is used to denote the handle appearance type.
value: It is used to denote the numeric value of this handle.
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. folder name, move to it using the following command:cd foldername
Step 2: After creating your project folder i.e. folder name, 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 @blueprintjs/core
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @blueprintjs/core
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.
App.js
import React from 'react'import '@blueprintjs/core/lib/css/blueprint.css';import { Slider } from "@blueprintjs/core";  function App() {    return (        <div style={{            display: 'block', width: 400, padding: 30        }}>            <h4>ReactJS Blueprint Slider Component</h4>            <Slider                min={0}                max={100}                stepSize={10}                labelStepSize={10}            />        </div >    );}  export default App;
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://blueprintjs.com/docs/#core/components/sliders
Blueprint-Core
Blueprint-Form Controls
React-Blueprint
JavaScript
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.