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 value change on click rage line

See original GitHub issue

Please describe the feature you would like to request.

  • we need to one property using this we can control the range value change or not on click or touch on <mat-slider> line.

What is the use-case or motivation for this proposal?

I use material angular in my website its work good but when I use in a mobile device I face a problem like when I scroll down that time I touch by mistake on mat range slider reason for that my rage was change if I not want

So I want a solution for that like I need only mat-slider value will change when user drag handle of mat-slider instead of clicking slider.

Is there anything else we should know?

https://stackoverflow.com/questions/55205407/mat-slider-touch-issue-in-mobile-device

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
Domvelcommented, Mar 20, 2019

The change event is fired twice. See https://github.com/angular/material2/issues/14363 It’s a bug. If you click on the “range line” the event should also be fired only once. Only on pointer (mouse / touch) up. But your request to disable click on range-line is good. In other words: Only allow slider-thumb interaction.

4reactions
igornescommented, Sep 29, 2019

Agree that this is an important request. We have the same issue with phone interactions. Users set the value of the slider by mistake while swiping vertically to scroll the form.

Read more comments on GitHub >

github_iconTop Results From Across the Web

disable value change on click rage line Angular Material
I think you could try to work around it - e.g. fetching the instance of slider using @ViewChild , accessing the private properties...
Read more >
Slider | Angular Material
Allows users to select from a range of values by moving the slider thumb. It is similar in behavior to the native <input...
Read more >
ion-range: Slider Knob Controls with Labels - Ionic Framework
ion-range lets you select from a range of values by moving the slider. It accepts dual knobs but one controls the value and...
Read more >
Easy Angular Testing – UI Elements – Slider and Slide Toggle
<mat-slider> allows for the selection of a value from a range via ... to pick our value, as well as a slide toggle...
Read more >
Angular Display Mat Slider Value - StackBlitz
<div> · <span>Grid Size (px): </span><b · class="gridSizeValue">{{gridsize.value}}</b> · </div> · <mat-slider #gridsize (change)="updateSetting · ($event)" step="5" ...
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