slider
slider copied to clipboard
Feature request: logarithmic scaling
Is it possible to have logarithmic scaling on the slider? Or alternatively, provide the values myself instead of having a linear step between them?
In my opinion, this feature looks reasonable.
May be use custom handle with Tooltips
? like this : https://codesandbox.io/s/r0mx034494
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 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
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.
@yoiang I'm not sure, how would that look with a large range (say values = [0, 1, 10, 100, 1000, 10000, 1000000])?
@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?
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.
@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.
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