ReactJS Blueprint Slider Component
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.
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