ReactJS Blueprint Slider Component

Last Updated : 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 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
```

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;