CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-component
soalrib
soalrib

Reputation: 599

How to output current values from the rc-slider react component?

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?

Upvotes: 4

Views: 11169

Answers (2)

Brian Dudey
Brian Dudey

Reputation: 1

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}} ...

Upvotes: -1

Tholle
Tholle

Reputation: 112867

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>
    );
  }
}

Upvotes: 5

Related Questions