Range Slider

[enkodellc]

https://github.com/MudBlazor/MudBlazor/issues/4152

Known issues:

We removed the ability to click on the slider to set the slider value as there are now 2 sliders one on top of the other therefore there was no great way to determine which slider to move. This could be done through JS or maybe through some other creative manner. If you would like to undo this then here is your css updates to start: .mud-range-container .mud-slider-input:last-of-type { position: absolute; pointer-events: none; top: 0; }

[mckaragoz]

Thanks for the PR, really good effort. I changed the example a bit and move the label div on top a bit.

I think we should not disable the click event. In worst situation, click may effect only on upper slider.

[mckaragoz]

And as the last suggestion we can add MinimumDistance parameter to ensure the range has a minimum distance.

[enkodellc]

Great suggestions. I have a couple of other small changes as well that I will submit and let you know. Right now we are using it in production and it works great.

[enkodellc]

1. Updated so click on track will move upper slider
2. Added a display option - Min - Max, Lower Value - Max, Min - Upper Value
3. Updated logic to manage null Lower and Upper values.
4. Added Gap variable
5. Tested Vertical, has some css bugs but close to the slider. Want me to remove it as an option?

[mckaragoz]

1. Updated so click on track will move upper slider
2. Added a display option - Min - Max, Lower Value - Max, Min - Upper Value
3. Updated logic to manage null Lower and Upper values.
4. Added Gap variable
5. Tested Vertical, has some css bugs but close to the slider. Want me to remove it as an option?

It look like broken for me, the upper slider place at the start.

Is GAP a clear name for "Minimum Distance"? It sounds more like "Upper Value - Lower Value"

Original slider also not perfect about vertical, so do you think its sufficient, no need to comment the parameter.

[enkodellc]

I renamed it, updated mudextensions.scss. I could not get the webcompiler to compile and could no find any instructions on how to use it. If you get it to compile the scss it should work. I removed my css from the component and put it in its own scss file as that seems to fit your architecture.

[mckaragoz]

I renamed it, updated mudextensions.scss. I could not get the webcompiler to compile and could no find any instructions on how to use it. If you get it to compile the scss it should work. I removed my css from the component and put it in its own scss file as that seems to fit your architecture.

https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions/blob/dev/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj#L42 Its on this line, need to uncomment, rebuild and comment again. Pushed it, i think its ready

[enkodellc]

@mckaragoz I added to the readme for tips for future contributors.

So the big issues I see are Vertical, but I still see it working just as bad for the default slider.

I just added a fix for FireFox issues.

[mckaragoz]

Thanks 🥇