get value of ion-rangeslider in Angular
I am using ion.rangeslider in my angular application and it displaying fine.
But how can i get the value of the silder and i need to update min and max values of the slider dynamically.
I have seen some of the questions in SO like this ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values. some of other solutions but they didn't help me.
my html is as follows
<div class="form-group">
<input ionSlider id="sliderData" type="text" data-min="2000" data-from="2000" data-max="2800" data-type="single"
data-step="5" data-prefix="$ " data-prettify="false" data-hasgrid="true" (onChange)="ionSliderForValues($event)">
</div>
Component
ionSliderForValues(event:any){
console.log(event);
}
is there any other methods to get the value of the slider or any chance to get in angular way. suggest me you wil be well rewared, thank you.
jquery angular smartadmin ion-range-slider
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
add a comment |
I am using ion.rangeslider in my angular application and it displaying fine.
But how can i get the value of the silder and i need to update min and max values of the slider dynamically.
I have seen some of the questions in SO like this ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values. some of other solutions but they didn't help me.
my html is as follows
<div class="form-group">
<input ionSlider id="sliderData" type="text" data-min="2000" data-from="2000" data-max="2800" data-type="single"
data-step="5" data-prefix="$ " data-prettify="false" data-hasgrid="true" (onChange)="ionSliderForValues($event)">
</div>
Component
ionSliderForValues(event:any){
console.log(event);
}
is there any other methods to get the value of the slider or any chance to get in angular way. suggest me you wil be well rewared, thank you.
jquery angular smartadmin ion-range-slider
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
1
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00
add a comment |
I am using ion.rangeslider in my angular application and it displaying fine.
But how can i get the value of the silder and i need to update min and max values of the slider dynamically.
I have seen some of the questions in SO like this ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values. some of other solutions but they didn't help me.
my html is as follows
<div class="form-group">
<input ionSlider id="sliderData" type="text" data-min="2000" data-from="2000" data-max="2800" data-type="single"
data-step="5" data-prefix="$ " data-prettify="false" data-hasgrid="true" (onChange)="ionSliderForValues($event)">
</div>
Component
ionSliderForValues(event:any){
console.log(event);
}
is there any other methods to get the value of the slider or any chance to get in angular way. suggest me you wil be well rewared, thank you.
jquery angular smartadmin ion-range-slider
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
I am using ion.rangeslider in my angular application and it displaying fine.
But how can i get the value of the silder and i need to update min and max values of the slider dynamically.
I have seen some of the questions in SO like this ion-rangeslider not getting displayed and ion RangeSlider: customize grid in case of custom values. some of other solutions but they didn't help me.
my html is as follows
<div class="form-group">
<input ionSlider id="sliderData" type="text" data-min="2000" data-from="2000" data-max="2800" data-type="single"
data-step="5" data-prefix="$ " data-prettify="false" data-hasgrid="true" (onChange)="ionSliderForValues($event)">
</div>
Component
ionSliderForValues(event:any){
console.log(event);
}
is there any other methods to get the value of the slider or any chance to get in angular way. suggest me you wil be well rewared, thank you.
jquery angular smartadmin ion-range-slider
jquery angular smartadmin ion-range-slider
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
edited Nov 27 '18 at 4:39
ganesh045
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
asked Nov 26 '18 at 10:50
ganesh045ganesh045
874314
874314
1
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00
add a comment |
1
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00
1
1
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00
add a comment |
1 Answer
1
active
oldest
votes
I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem
For npm installation and Imports, do follow ng2-ion-range-slider documentation
component.html
<div class="form-group">
<ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
[from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
</div>
component.ts
myOnChange(event: any) {
console.log(event.from);
}
you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
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%2f53479526%2fget-value-of-ion-rangeslider-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem
For npm installation and Imports, do follow ng2-ion-range-slider documentation
component.html
<div class="form-group">
<ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
[from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
</div>
component.ts
myOnChange(event: any) {
console.log(event.from);
}
you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
add a comment |
I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem
For npm installation and Imports, do follow ng2-ion-range-slider documentation
component.html
<div class="form-group">
<ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
[from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
</div>
component.ts
myOnChange(event: any) {
console.log(event.from);
}
you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
add a comment |
I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem
For npm installation and Imports, do follow ng2-ion-range-slider documentation
component.html
<div class="form-group">
<ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
[from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
</div>
component.ts
myOnChange(event: any) {
console.log(event.from);
}
you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
I found a way to do this, with the help of ng2-ion-range-slider as @Ravikumar suggested. I felt there was no answer related to this in SO. That's why i am posting my answer here for some other who is stuck in same problem
For npm installation and Imports, do follow ng2-ion-range-slider documentation
component.html
<div class="form-group">
<ion-range-slider #sliderElement type="single" [min]="myMinVar" [max]="myMaxVar" grid_num="10" prefix="$ "
[from]="currentValue" (onChange)="myOnChange($event)"></ion-range-slider>
</div>
component.ts
myOnChange(event: any) {
console.log(event.from);
}
you can change the min and max range of the slider dynamically by adding variables in component and assign them as attributes.
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
edited Nov 28 '18 at 5:43
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
answered Nov 28 '18 at 5:37
ganesh045ganesh045
874314
874314
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
add a comment |
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
If any one find better approach than this, let me know :)
– ganesh045
Nov 28 '18 at 13:05
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%2f53479526%2fget-value-of-ion-rangeslider-in-angular%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
1
go with this github.com/PhilippStein/ng2-ion-range-slider, i dont know how you implemented the jquery script in angular, but i hope this will work
– Ravikumar
Nov 26 '18 at 11:00