slider icon indicating copy to clipboard operation
slider copied to clipboard

Feature request: logarithmic scaling

Open alongalky opened this issue 7 years ago • 10 comments

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

alongalky avatar Jan 30 '18 14:01 alongalky

In my opinion, this feature looks reasonable.

yutingzhao1991 avatar Jan 31 '18 01:01 yutingzhao1991

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

Robin-front avatar Jan 31 '18 01:01 Robin-front

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.

alongalky avatar Feb 07 '18 12:02 alongalky

@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

yoiang avatar Mar 12 '18 15:03 yoiang

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.

ericchen0121 avatar Mar 29 '18 23:03 ericchen0121

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

alongalky avatar Apr 16 '18 15:04 alongalky

@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?

tibotiber avatar Jan 08 '19 14:01 tibotiber

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.

cinderblock avatar Dec 01 '19 12:12 cinderblock

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

alongalky avatar Dec 24 '19 09:12 alongalky

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

dmt0 avatar Apr 07 '21 20:04 dmt0