I installed the rc-slider React Component on my React app, but I need to output the current values from the slider, how do I do that? This is the current code:

import React from 'react';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

export class RangeSlider extends React.Component {
  render() {
    return (
      <div>
        <Range min={0} max={10000} defaultValue={[800, 3000]} tipFormatter={value => `${value}€`} />
      </div>      
    )
  }
}

Also, how do I change the font-family from the tooltip where values are displayed when grabbing slider's handles?

I installed the rc-slider React Component on my React app, but I need to output the current values from the slider, how do I do that? This is the current code:

import React from 'react';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

export class RangeSlider extends React.Component {
  render() {
    return (
      <div>
        <Range min={0} max={10000} defaultValue={[800, 3000]} tipFormatter={value => `${value}€`} />
      </div>      
    )
  }
}

Also, how do I change the font-family from the tooltip where values are displayed when grabbing slider's handles?

• javascript
• reactjs
• react-native
• react-ponent

Share Improve this question Follow edited Jul 12, 2018 at 16:53 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 12, 2018 at 16:36 soalribsoalrib 59933 gold badges99 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You could store the slider values in state and use the onChange prop to update the slider values when they change.

The function given to tipFormatter can also return JSX as well as a string, so you can add a custom className and change font-family for that class.

Example

export class RangeSlider extends React.Component {
  state = { sliderValues: [800, 3000] };

  handleChange = sliderValues => {
    this.setState({ sliderValues });
  };

  render() {
    const { sliderValues } = this.state;
    return (
      <div>
        {sliderValues[0]} - {sliderValues[1]}
        <Range
          min={0}
          max={10000}
          onChange={this.handleChange}
          defaultValue={sliderValues}
          tipFormatter={value => <span className="tooltip">{value}€</span>}
        />
      </div>
    );
  }
}

For some reason, that last part of your code was not working for me as I was trying to get the range tooltip to animate correctly and display the correct data. I had to install an older version of rc-slider (8.7.1) in order to fix the tooltip animation that is currently broken at the time of this post. The code fix that got it all working correctly with the older version was: ... tipFormatter={value => ${value}} tipProps={{visible: true}} ...