Author avatar

Vivek Kumar

Displaying a Tooltip on Range Sliders with React

Vivek Kumar

  • Aug 7, 2019
  • 6 Min read
  • 665 Views
  • Aug 7, 2019
  • 6 Min read
  • 665 Views
Web Development
React

Introduction

The React.js component is one of the most popular frameworks because of the enormous number of libraries that it has to offer. There is almost every type of solution available with this JS component. The accessibility to the features and benefits of range sliders are not sacrificed when using the React.js component.

Range sliders are very pivotal, especially when it is about the creation of the UI components. They are one of the most trusted and seamless methods, when it comes to making decisions and fixing up the numeric range on both static and dynamic websites available on the Internet.

The range slider is, basically, a program component that is effective in the creation of numeric range sliders in the User Interface (UI) components. In addition to that, the component is also applied for the granular filtering of the numeric data. Some of the examples include:

  • The process of filtering up products on the basis of the price range on an e-commerce shopping portal.
  • The process of filtering flights on the basis of the range of the arrival and the departure times.

In this guide, apart from emphasizing on the basic usage of the range sliders, we are also going to discuss the easiest, yet effective, way of displaying a tooltip on range sliders with React.js. With the completion of this guide, it is going to be a lot easier for you to work with the display of the tooltip component and fetch the finest results whenever applicable.

The Basic Application: RangeSlider

The basic application of the React slider, right from start to the finish, can be well understood from the basic commands shown below:

1
2
3
4
5
6
7
8
9
<RangeSlider
	componentId="RangeSliderSensor"
	dataField="guests"
	title="Example"
	range={{
		"start": 0,
		"end": 10
	}}
/>
jsx

In the basic process of applying the Range Slider, only the above-mentioned props are applicable. But when it is about increasing the range or to bring some complexity, then there are many other additional props that can help you out.

Some of the commonly used props that have an essential role in the advanced application are setting the step value of the range slider, specifying labels for the range endpoints, whether to display a histogram, etc.

The Props

Though there are an immense number of props that can be used to make things easier while applying Range Sliders with React.JS, the one that we are going to focus on in this guide is ToolTip.

Now, the function of the ToolTip trigger string comes into play when the range value has already been specified. The type of ToolTip trigger will be in accordance with the value mentioned in the system. The trigger string can be focus, hover, always as well as none. Now, the general question that may arise in your mind is, “What is the significance of the none ToolTip trigger in the entire scheme of things?” Well, the string is set to none in the case of default component application.

In the React.JS component, the customization of the rendered ToolTip content is done in order to display it as per the need. The customization of the data is, basically, accomplished with the help of a function that receives ToolTip content and then processes it in React.JS. The following are the steps that are followed, in the standard terms, in order to successfully display a ToolTip on range sliders with a React.JS component.

1
2
3
4
5
6
7
8
renderTooltipData={data => (
    <h5 style={{
        color: 'red',
        textDecoration: 'underline'
    }}>
        {data}
    </h5>
)}
jsx

Alternative Approaches

Apart from the above stated RangeSlider component, there are two other available approaches which you can learn to create a Tooltip on range sliders:

Approach One

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var InputRange = React.createClass({
    getInitialState: function() {
      return {
        points: 5
      };
    },
    handleChange: function(e) {
      e.preventDefault();
      this.setState({points: e.target.value});
    },
    render: function() {
        return <input 
          type="range" 
          name="points"
          min="0" 
          max="10"
          title={this.state.points}
          value={this.state.points}
          onChange={this.handleChange} />;
    }
});
jsx

Approach Two

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var SmallTooltip = React.createClass({

 getInitialState: function () {
   return {
     showTooltip: false
   };
 },

 onMouseEnter: function () {
   this.setState({
     showTooltip: true
   });
 },

 onMouseLeave: function () {
   this.setState({
     showTooltip: false
   });
 },

 render: function () {
   var toolTipClass = !this.state.showTooltip ? 'tooltip hidden' : 'tooltip';
   return (
    <span onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className='someCoolWrapperClass'>
      <span className={toolTipClass}>
        This is shown when you hover over the span
      </span>
    </span>
   );
 }
});
jsx

Conclusion

In the guide, we have successfully learned the basic features and usage of the Range Sliders and discussed some of the common approaches focusing on the display of ToolTip on Range Sliders.

0