I want to display current slider handler position value.

[srigar]

Is there anyway to display current slider handler position value? Consider scenario like, When i move slider, the current value need to display under the slider handler

[sweetgiorni]

You can do this by using a custom handle. Here's how I rendered a date as a tooltip:

handle = props => {
    const { value, dragging, index, ...restProps } = props;
    return (
      <Tooltip
        prefixCls="rc-slider-tooltip"
        overlay={moment.unix(value).format(dateFormat)}
        visible={dragging}
        placement="top"
        key={index}
      >
        <Handle value={value} {...restProps} />
      </Tooltip>
    );
};

<Range
    allowCross={true}
    defaultValue={this.props.dateBounds}
    step={500}
    handle={this.handle}
    min={this.props.dateBounds[0]}
    max={this.props.dateBounds[1]}
    value={this.props.dateRange}
    onChange={value => {
      this.updateSelectedRange(value);
    }}
/>

[mdere-unbound]

@sweetgiorni - ToolTip component you used - is it custom or you using a library?

[sweetgiorni]

@mdere-unbound

It's the rc-tooltip library. See this example: https://github.com/react-component/slider/blob/master/examples/handle.jsx

[naazim]

Also possible to get the tooltip done without rc-tooltip, only using CSS:

.rc-slider-handle:before {
     content: attr(aria-valuenow) ' %';  // to display current value of slider
    /* style your tooltip */
}