Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS Blueprint Slider Component

  • Last Updated : 10 Jul, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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;

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!