Stack Overflow
Stack Overflow

Questions tagged [mat-slider]

For questions about the component for Angular Material. When using this tag also include the more generic [angular-material] and [angular] tags where possible.

23 questions
5
votes
5 answers

Change the Material Slider Thumb size

so I have this project where I used Mat Slider and I'm showing text values on it's thumb, but the thumb size is too small for my text ! I looked a lot for a way to change the thumb size but I didn't find anything! I'm not that good in CSS so I…
Baraa Al-jabali
  • 137
  • 3
  • 9
3
votes
0 answers

How should the mat-slider be used inside a form configured with formGroup? Angular Material

I have created a form that has inputs of text type and a mat-slider to get a numeric value // TS this.consumptionForm = this.formBuilder.group({ dailyConsumption: ['', Validators.required], cost: [20, Validators.required], }); //…
juanjinario
  • 596
  • 1
  • 9
  • 24
2
votes
1 answer

angular reset value for mat-slider within mat-table

I have a list of sliders rendered in a Mat table, and a final slider is displaying the total. I need to reset the value to 0 if it is moved and the total is greater than 100. It works perfectly fine if I release the mouse within the slider element,…
Ashok Prabhu
  • 43
  • 7
1
vote
1 answer

Is there a way in Angular to get a mat-slider with a width less than 128px?

I haven't been able to find any ways to get a mat-slider smaller than 128px wide. Is there a way to do this? I have used transform: scale(); as a temporary solution, but this creates issues with other elements. An example of the type of slider with…
Iliya Meyer
  • 13
  • 2
1
vote
1 answer

Change value of mat-slider to default value on click of button

Refresh(){ // What should be written in this } Suppose I changed this slider and when I click on refresh button, I need to…
bollam_rohith
  • 334
  • 4
  • 17
1
vote
0 answers

mat-slider showing negative values with initial value 0 without track fill

What I tried : Here Zero is showing middle with track fill up to Zero but I want to display intial Zero without track fill and also when I select any negative value track should fill…
bollam_rohith
  • 334
  • 4
  • 17
1
vote
1 answer

Get values from multiple mat-sliders dynamically created within ngFor

I am dynamically creating multiple mat-sliders in Angular as follows:
Caustix
  • 569
  • 8
  • 26
1
vote
3 answers

Angular material mat-sidenav-content click event issue

When I put click event on mat-sidenav-content The mat-slide-toggle inside is not working. Here is the example
cheziHoyzer
  • 4,803
  • 12
  • 54
  • 81
1
vote
1 answer

How to prevent content jumping on screen when toggling display of mat slider

If I hover on the volume Icon it adds a mat-slider which pushes the whole content down, how can I prevent this ? Reproducible in this Stackblitz example
Hover on below icon to see jumping
dota2pro
  • 7,220
  • 7
  • 44
  • 79
0
votes
0 answers

mat-slider inverting active and inactive tracks

I am using angular Material 15. Is there a way to make so the active track (the thick one) is on the right side of the thumb instead of the left side? I havn,'t found anything in the documentation. And besides playing with ::ng-deep on several of…
JK2018
  • 429
  • 1
  • 9
  • 23
0
votes
1 answer

Customize mat-slider in Angular 15 thumb

in Angular 14 I customized the slider as image below: And my CSS code: .customSlider { .mat-slider-thumb-label { transform: rotate(45deg) !important; border-radius: 50% 50% 0 !important; display: flex !important; …
scorona85
  • 97
  • 6
0
votes
1 answer

Angular mat-slider track fill customize with gradient

I have to customize a angular math-slider track fill with a gradient. I have try to override the mat-slider-track-fill has code below but it doesn't works. .mat-slider-track-fill { background-color: linear-gradient(90deg,…
scorona85
  • 97
  • 6
0
votes
1 answer

mat-slide-toggle with 3 states

I am trying to build a mat-slide-toggle button with 3 states which look like something like this in my angular application. Is there anything like this in the mat-slide-toggle to achieve this?
Manu Mohanan
  • 31
  • 1
  • 8
0
votes
0 answers

Angular Mat-Slider Min Max Problem On Float Numbers Have 'e'

I'm trying to use mat-slider on numbers like; min: -1.7976931348623157e+308, max: 1.7976931348623157e+308 step:0.01 But it doesn't behave as it is. The number gets changed just between min and max, not steps 0.01.
Murat Can OĞUZHAN
  • 735
  • 11
  • 19
0
votes
1 answer

how to make text on the mat-slide-toggle

how to put text on mat-slide-toggle like when it is true I want to show it as assigned and when false not assigned Assign All
M D V Ajay kumar 360
  • 27
  • 1
  • 1
  • 5
1
2