Slider: Feature request: logarithmic scaling

[alongalky]

Is it possible to have logarithmic scaling on the slider? Or alternatively, provide the values myself instead of having a linear step between them?

[yutingzhao1991]

In my opinion, this feature looks reasonable.

[Robin-front]

May be use custom handle with Tooltips? like this : https://codesandbox.io/s/r0mx034494

[alongalky]

If you scroll all the way to the left you get a "0" tooltip but a "1" value. This can be fixed of course, but is an example of the kind of bug that shows why this is a useful feature.

[yoiang]

@alongalky were you imagining where the 'shape' of the function, whether logarithmic, exponential, or any other, was illustrated on the slider? https://codesandbox.io/s/43qkmk6lr7

[ericchen0121]

What I'm doing is using values as [1,2,3,4,5] and the labels as what you want. Then I'm going to transform the 1,2,3,4,5 values into the values I'm using.

const follower_marks = {
      0: '0',
      1: '1K',
      2: '5K',
      3: '10K',
      4: '50K',
      5: '100K',
      6: '500K',
      7: '1M',
      8: '50M'
    };

return (
  <div style={style}>
    <Slider min={0} max={8} marks={follower_marks} step={null} included={false} onChange={this.handleSlider} defaultValue={3} />
  </div>

It's not ideal, but it gives me some measure of control over the appearance.

[alongalky]

@yoiang I'm not sure, how would that look with a large range (say values = [0, 1, 10, 100, 1000, 10000, 1000000])?

[tibotiber]

@alongalky in case you are still interested, I made the following example based on the sandbox from @yoiang: https://codesandbox.io/s/qxm182k0mw.

@yutingzhao1991 @yesmeck what do you think about this approach? Is it something we could try to implement in the component with optional curve and inverseCurve props?

[cinderblock]

I took a stab at implementing a Component that wraps a Slider to provide logarithmic functionality with ease: https://gist.github.com/cinderblock/6f52313a06ad3f8bf0e0290826d1ef10

Not extensively tested but should work.

[alongalky]

@tibotiber Sorry for the slow response, kind of forgot about this. It looks great, but has a lot of repeated code, which is why I think it's a good candidate for a native feature.

[dmt0]

I took @tibotiber's solution and made it into a component for easy copy/pasting:
https://codesandbox.io/s/rc-slider-log-demo-forked-xffr0