Slider: Allow formatting aria-valuenow attribute

[jeznag]

Currently there is no way to format the aria-valuenow attribute. Would be great to expose a function like tipFormatter to format the value.

[paranoidjk]

what if we let the aria-value be processd by tipFormatter first？

[jeznag]

Can we have a different method as I don't want to use tooltip and tipFormatter isn't exposed otherwise? I had a crack at https://github.com/react-component/slider/pull/284

[paranoidjk]

Can you explain more ?

IMO your use case is weird, since you do not want tooltip fomatter for normal user, why you want screen readers to read formated value?

[jeznag]

TBH I don't like the tooltip. It renders really slowly for me and I don't like that it disappears. I'm displaying values above the handle using this CSS:

  .rc-slider-handle:before {
    content: attr(aria-valuenow);
    font-size: .75rem;
    position: absolute;
    top: -2.188rem;
  }

[paranoidjk]

Actually you can fully custom the handle behavior, see https://github.com/react-component/slider/blob/master/examples/handle.js#L14

Correct me if i do not understand correctly, you want valueFormatter just because that you want to read it with css ?

Sorry, i am not agree with your proposal, since our principle is to keep as few api as possible, and i think valueFormatter is unnecessary.

[jeznag]

Ah cool thanks I didn't think about manually overriding aria-valuenow like that. Here's what I'm doing:

      const handle = (props) => {
        const { value, dragging, index, ...restProps } = props;
        return (
          <Handle
            value={value}
            {...restProps}
            aria-valuenow={decimalToTimeStringFormatter.decimalToTimeString(value)}
          />
        );
      };