How to disable part of Angular material slider
For part of a project I'm working on, I want to be able to create a slider that shows an age range of 0-100, but the slider needs to stop at a certain point, like 18 years old.
I still want to show 0-18, but the user should only be able to slide through ages 19-100.
The project is using Angular Materials but I don't see any way to achieve what I want. I have already tried the Documentation https://material.angular.io/components/slider/overview and searching through Google but no luck.
Here's the code
<mat-slider min="0" max="100" step="1" value="20"></mat-slider>
This is what I want to do
<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>
angular angular-material
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
add a comment |
For part of a project I'm working on, I want to be able to create a slider that shows an age range of 0-100, but the slider needs to stop at a certain point, like 18 years old.
I still want to show 0-18, but the user should only be able to slide through ages 19-100.
The project is using Angular Materials but I don't see any way to achieve what I want. I have already tried the Documentation https://material.angular.io/components/slider/overview and searching through Google but no luck.
Here's the code
<mat-slider min="0" max="100" step="1" value="20"></mat-slider>
This is what I want to do
<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>
angular angular-material
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
min,maxare@Inputproperties, you should wrap the properties names in square brackets like[min]="18"
– IvanS95
Nov 14 '18 at 20:03
add a comment |
For part of a project I'm working on, I want to be able to create a slider that shows an age range of 0-100, but the slider needs to stop at a certain point, like 18 years old.
I still want to show 0-18, but the user should only be able to slide through ages 19-100.
The project is using Angular Materials but I don't see any way to achieve what I want. I have already tried the Documentation https://material.angular.io/components/slider/overview and searching through Google but no luck.
Here's the code
<mat-slider min="0" max="100" step="1" value="20"></mat-slider>
This is what I want to do
<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>
angular angular-material
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
For part of a project I'm working on, I want to be able to create a slider that shows an age range of 0-100, but the slider needs to stop at a certain point, like 18 years old.
I still want to show 0-18, but the user should only be able to slide through ages 19-100.
The project is using Angular Materials but I don't see any way to achieve what I want. I have already tried the Documentation https://material.angular.io/components/slider/overview and searching through Google but no luck.
Here's the code
<mat-slider min="0" max="100" step="1" value="20"></mat-slider>
This is what I want to do
<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>
angular angular-material
angular angular-material
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
edited Nov 14 '18 at 20:00
nuage75319
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
asked Nov 14 '18 at 19:51
nuage75319nuage75319
12
12
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
min,maxare@Inputproperties, you should wrap the properties names in square brackets like[min]="18"
– IvanS95
Nov 14 '18 at 20:03
add a comment |
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
min,maxare@Inputproperties, you should wrap the properties names in square brackets like[min]="18"
– IvanS95
Nov 14 '18 at 20:03
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
min, max are @Input properties, you should wrap the properties names in square brackets like [min]="18"– IvanS95
Nov 14 '18 at 20:03
min, max are @Input properties, you should wrap the properties names in square brackets like [min]="18"– IvanS95
Nov 14 '18 at 20:03
add a comment |
2 Answers
2
active
oldest
votes
I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).
<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>
sliderChange(event) {
if (event.value < 19) {
setTimeout(() => event.source.value = 19);
}
}
You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
add a comment |
link:- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts
*.component.ts
min = '0';
max = '100';
step ="1";
value ="20";
slideIt(e) {
if (e.value < this.value) {
e.source.value = this.value;
}
}
*.component.html
<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>
answered Nov 14 '18 at 21:14
MahiMahi
764320
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307797%2fhow-to-disable-part-of-angular-material-slider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).
<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>
sliderChange(event) {
if (event.value < 19) {
setTimeout(() => event.source.value = 19);
}
}
You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
add a comment |
I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).
<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>
sliderChange(event) {
if (event.value < 19) {
setTimeout(() => event.source.value = 19);
}
}
You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
add a comment |
I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).
<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>
sliderChange(event) {
if (event.value < 19) {
setTimeout(() => event.source.value = 19);
}
}
You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).
<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>
sliderChange(event) {
if (event.value < 19) {
setTimeout(() => event.source.value = 19);
}
}
You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
answered Nov 14 '18 at 23:17
G. TranterG. Tranter
4,7161423
4,7161423
add a comment |
add a comment |
link:- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts
*.component.ts
min = '0';
max = '100';
step ="1";
value ="20";
slideIt(e) {
if (e.value < this.value) {
e.source.value = this.value;
}
}
*.component.html
<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>
answered Nov 14 '18 at 21:14
MahiMahi
764320
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
add a comment |
link:- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts
*.component.ts
min = '0';
max = '100';
step ="1";
value ="20";
slideIt(e) {
if (e.value < this.value) {
e.source.value = this.value;
}
}
*.component.html
<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>
answered Nov 14 '18 at 21:14
MahiMahi
764320
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
add a comment |
link:- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts
*.component.ts
min = '0';
max = '100';
step ="1";
value ="20";
slideIt(e) {
if (e.value < this.value) {
e.source.value = this.value;
}
}
*.component.html
<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>
answered Nov 14 '18 at 21:14
MahiMahi
764320
link:- https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts
*.component.ts
min = '0';
max = '100';
step ="1";
value ="20";
slideIt(e) {
if (e.value < this.value) {
e.source.value = this.value;
}
}
*.component.html
<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>
answered Nov 14 '18 at 21:14
MahiMahi
764320
edited Nov 15 '18 at 18:14
answered Nov 14 '18 at 21:14
MahiMahi
764320
answered Nov 14 '18 at 21:14
MahiMahi
764320
answered Nov 14 '18 at 21:14
MahiMahi
764320
764320
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
add a comment |
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
That starts the slider off at 19, but I need to make sure that the slider can't go lower than that. Like a restricted area of a slider in AngularJS or something
– nuage75319
Nov 14 '18 at 21:54
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
@nuage, updated answer.
– Mahi
Nov 15 '18 at 18:08
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307797%2fhow-to-disable-part-of-angular-material-slider%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you show relevant codes that you have tried or show in- angular-material Stackblitz.
– Mahi
Nov 14 '18 at 19:55
I updated my question - thanks!
– nuage75319
Nov 14 '18 at 20:00
min,maxare@Inputproperties, you should wrap the properties names in square brackets like[min]="18"– IvanS95
Nov 14 '18 at 20:03