mat-slider: disable special styling on minimum value

[dmarku]

Feature Description

If a <mat-slider> is set to its minimum value, it adds a special class (.mat-slider-min-value) that changes the styling of the slider thumb. It would be useful to disable this behavior or adjust the value where this "resting state" occurs.

Use Case

In our scenario, the slider ranges from negative to positive values, so the minimum value is not semantically different to other values (except maybe the zero position). It would be nice to visually represent this equality.

[devversion]

This will be fixed in the MDC-based implementation of the slider we are working on. At first glance, it looks like the Material Design specification no longer has special styles for the minimum value.

[thw0rted]

Would you consider leaving the existing styling in place and instead separating out the "min" and "default" values? So, <mat-slider min="-10" max="10" default="0"> would show the same special styling as the .mat-slider-min-value class currently provides, but only when the slider is positioned at the value zero -- i.e., the exact middle of the range. That would also neatly solve the case that led me to find this issue: I want a slider that runs from 20-100, with a falsy "default" so that it never uses the min-value styling.

[hannounf]

Hello, Any updates or other suggestions to solve this?

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[sdalexandre]

There is no reason to have a separate styling for the minimum value except for a specific use cases where the minimum value means empty and/or is an invalid selection.

[zreptil]

Why is there this special behavior? As @sdalexandre stated, the only meaningful usage for this feature is that the minimum value has a speacial meaning like empty or invalid. But when i use a slider, my normal usecase is to give the user the possibility to select a value from a range of values, where the minimum is equal in value to all the other values up to the maximum. The case that angular states as the normal case is in my opinion the special case that should be enabled with an attribute or at least be possible to disable with an attribute.

[ger-benjamin]

With a bigger thumb-label, the min-value class is useful to set the label placement. But sadly, there is no equivalent for "max-value". This inconsistency is annoying. Please, add max-value, or replace min-value by default value, or remove min-value to be consistent. I would remove it as we can add a custom class easily on min-max value.

[Mateusz19021996]

exactly, why we can't set special style / color on min / max value? specially for min

[wagnermaciel]

Hi folks! The new MDC slider came out in v15 and I believe this is no longer relevant since there's no special styling on the minimum value anymore

For additional context, this is not something we plan to bring back because 1. it diverges from the latest Material design spec and 2. this seems really trivial to add back in if you really want it

E.g.

<mat-slider
    [color]="mySliderThumb.value === mySlider.min || mySliderThumb.value === mySlider.max ? 'warn' : 'primary'"
    #mySlider>
        <input #mySliderThumb="matSliderThumb" matSliderThumb>
</mat-slider>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}