question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-slider: disable special styling on minimum value

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:13
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
zreptilcommented, Sep 10, 2022

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.

1reaction
wagnermacielcommented, Dec 8, 2022

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>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Slider - Angular Material
By default the minimum value of the slider is 0 , the maximum value is 100 , and the thumb moves in increments...
Read more >
Disable Angular Material slider and set slider value to ...
Both slider are disabled, but the styling is differently. Since the value is one and the minimum slider value is also one the...
Read more >
Angular Mat Slider Full Options - StackBlitz
<h2 class="example-h2">Slider. configuration</h2>. <section class="example-section">. <mat-form-field class="example-margin">. <input matInput type="number".
Read more >
Slider API - Material UI - MUI
A string value that provides a user-friendly name for the current value of the slider. classes, object. Override or extend the styles applied...
Read more >
<mat-slider> in Angular Material - GeeksforGeeks
Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found