I am using react rc-slider. I want to add tooltip to display current value I am following rc-slider github post. but my slider position got fixed. and once tooltip appeared and it is not disappearing. my slider looks likes this

Related code is below

const handle = () =>(

       <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={this.props.value}
      visible={true}
      placement="top"
      key={0}
    >
      <Handle value={this.props.value}  />
    </Tooltip>

And my render is

    return (

      <Slider
        min={this.props.minValue}
        max={this.props.maxValue}
        marks={marks}
        disabled={this.props.disabled}
        step={this.props.step}
        onChange={this.updateValue.bind(this)}
        value={this.props.value}
        handle={handle}
       // tipFormatter={value => `${value}%`}
        onAfterChange={value => this.props.updateValue(value)}
      />
)

please help me how to improve this

I am using react rc-slider. I want to add tooltip to display current value I am following rc-slider github post. but my slider position got fixed. and once tooltip appeared and it is not disappearing. my slider looks likes this

Related code is below

const handle = () =>(

       <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={this.props.value}
      visible={true}
      placement="top"
      key={0}
    >
      <Handle value={this.props.value}  />
    </Tooltip>

And my render is

    return (

      <Slider
        min={this.props.minValue}
        max={this.props.maxValue}
        marks={marks}
        disabled={this.props.disabled}
        step={this.props.step}
        onChange={this.updateValue.bind(this)}
        value={this.props.value}
        handle={handle}
       // tipFormatter={value => `${value}%`}
        onAfterChange={value => this.props.updateValue(value)}
      />
)

please help me how to improve this

• javascript
• reactjs
• slider

Share Improve this question Follow edited Sep 5, 2017 at 18:07 Panther 9,41833 gold badges2525 silver badges3636 bronze badges asked Sep 5, 2017 at 18:00 LowCoolLowCool 1,41155 gold badges3131 silver badges5555 bronze badges 2

• Are there any erro in console ? – Panther Commented Sep 5, 2017 at 18:19
• if I use Range it is but for slider no – LowCool Commented Sep 5, 2017 at 18:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I end up using createSliderWithTooltip of rc-slider below is my updated code

import Slider, { createSliderWithTooltip } from 'rc-slider';

const SliderWithTooltip = createSliderWithTooltip(Slider);
 <SliderWithTooltip
        min={this.props.minValue}
        max={this.props.maxValue}
        marks={marks}
        disabled={this.props.disabled}
        step={this.props.step}
        onChange={this.updateMixValue.bind(this)}
        value={this.props.value}
              onAfterChange={value => this.props.MixValue(getValues(value))}
      />

and in scss file added like this

  .rc-slider-mark{
                padding-top:7px;
            }
            .rc-slider-step{
                span{
                    background-color: rgb(44, 71, 112);
    border-color: rgb(44, 71, 112);
                }
            }
            .rc-slider-handle{
                background-color: #5bc0de;
                border-color: #5bc0de;
            }