Fluentui: Slider Range picker

[brandonhorn]

It would be useful to have either a new component, or a parameterized slider, that had two thumbs and acted as a range picker. The parameters for it would match those of the slider, but would extend it to set an optional max range width (the distance between the two thumbs). Bounds checking would be needed for if the user tries to move the min thumb to be greater than the max thumb. onChange could return the two values. Tabbing would focus first on the min thumb, then on the max thumb.

[leddie24]

Hi @brandonhorn, thank you for your suggestion! Is this component something you would be willing to help contribute to? We have a wiki page for reference on contributions to Office UI Fabric:

https://github.com/OfficeDev/office-ui-fabric-react/wiki/New-Components

@aneeshack4, as a code owner for Slider, do you think this behavior would be able to implement as a variant of Slider, or should it be its own component?

[aneeshack4]

@leddie24 apologies for the late response, this slipped under my radar in all of the github noise in my inbox. I believe this should be a variant of Slider. I understand the use case for a two thumb slider but I don't see the need for an optional max range width - @brandonhorn, what is the use case you had in mind for restricting the distance between the two thumbs?

[benn-thomsen]

Any progress on this. It would great to also have value labels under the two thumbs. Like the upper slider in the image below.

[benn-thomsen]

For the standard slider being able to display the slider value above or below the thumb so it moves with the thumb would also be super cool

[benn-thomsen]

I also don't see the case for the max range width. It might be good to return the range i.e. value2-value1 in addition to the two values

[aneeshack4]

We have the 2 thumb slider work slated for soon. And we're working on labels also. @benn-thomsen I don't fully understand the request for the max range width - what do you mean by this? If you have a visual mock up for this too, that'd be great.

[benn-thomsen]

Excellent to see this is going to happen.

To clarify I don't see the need for a max range width parameter that @brandonhorn initially requested.

I would only add the following attributes to the current slider:

valueMin: Value of the left hand (or lower slider for vertically orientated sliders)
valueMax: Value of the right hand (or upper slider for vertically orientated sliders)
range: value_max - value_min
showThumbValue: Boolean True: Displays the current value above or below each slider thumb
thumbValueAbove: Boolean controls the position of the thumb value display

The lower and upper sliders should not be able to cross over each other. I.e. if you slide the lower sider towards the upper slider it should push the upper slide along in front of it rather than passing over it. Similarly if you slide the upper slider down it should push the lower slider in front of it.

I would probably also constrain it so that the minimum range is the step size as controlled by the step attribute. I.e valueMax >= valueMin+step

[sapallie]

@aneeshack4
Here’s a little mock-up of what Benn was talking about: Min and Max value displayed on the ends of the slider while the values of the range are displayed underneath the slider:

[Muthaias]

I needed this so I made a quick implementation by ripping a lot of code from the current Slider. There's likely room for some code sharing between Slider and Slider Range picker, though currently I haven't prioritized this.

The implementation includes basic documentation and examples but I'm quite sure it isn't following current guidelines since it is not located in experimental and probably other things. If there's any interest please have a look: https://github.com/Muthaias/office-ui-fabric-react/tree/feature/range-input

[khmakoto]

@aneeshack4 is this currently in the Slider that is in the experiments package?

[aneeshack4]

@khmakoto No our intern attempted it this past summer but it ended up being a longer work item that would require more time but her work is in this PR https://github.com/OfficeDev/office-ui-fabric-react/pull/10105

[khmakoto]

@aneeshack4 cool, thanks for the update!

[danmarshall]

+1 on having this component. I would also like this new range slider to have the ability to "grab" the bar between the thumbs, and move both thumbs simultaneously while maintaining the distance between them.