How to import ion-rangeslider in Aurelia - aurelia

Question

I am trying to use the ionRangeSlider plugin in Aurelia but am not sure how to make use of it.
https://github.com/IonDen/ion.rangeSlider/issues
I have jspm'd it into my project but how do I import it as well as call the one function that runs the plugin?

Answer 1

You will find the exact package names for including ion-rangesider in your package.json:
jspm": {
"dependencies": {
...
"ion-rangeslider": "npm:ion-rangeslider#^2.1.3",
"jquery": "npm:jquery#^2.2.3",
...
}
}
Then you need to create your own custom element like:
import {inject, noView} from 'aurelia-framework';
//import your dependencies
import $ from 'jquery';
import ionRangeSlider from 'ion-rangeslider';
#noView()
#inject(Element)
export class Slider {
constructor(element){
this.element = element;
}
bind(){
$(this.element).ionRangeSlider({min: 100, max: 1000, from: 550});
}
}
And where you want to use your slider you have to write:
<require from='./slider'></require>
<require from="ion-rangeslider/css/ion.rangeSlider.skinHTML5.css"></require>
<require from="ion-rangeslider/css/ion.rangeSlider.css"></require>
<slider></slider>
Normally you would put the <require from="xxx.css"></require> tags inside slider.html to ensure style encapsulation. In my example i put them where i wanted to use the slider because so i don´t needed to create a slider.html.

Answer 2

Here is an example how to use the bootstrap popover.
I guess you should be able to do the same and calling $("#example_id").ionRangeSlider(); from within the bind function
if you imported all resources

Answer 3

Install ion-rangeslider first:
npm install ion-rangeslider
jspm install npm:ion-rangeslider
Create a custom attribute
import {customAttribute, bindable, inject} from 'aurelia-framework';
import {ionRangeSlider} from 'ion-rangeslider';
#customAttribute('rangeslider')
#inject(Element)
export class RangesliderCustomAttribute {
//make your own options based on requirements
options = { type: "single", min: 0, max: 100 };
constructor(element) {
this.element = element;
}
attached() {
$(this.element).ionRangeSlider(this.options).on('change', e => {
fireEvent(e.target, 'input');
});
}
detached() {
$(this.element).ionRangeSlider('destroy').off('change');
}
}
function createEvent(name) {
var event = document.createEvent('Event');
event.initEvent(name, true, true);
return event;
}
function fireEvent(element, name) {
var event = createEvent(name);
element.dispatchEvent(event);
}
import css into app.html or where you import css in your application
<require from="ion-rangeslider/css/ion.rangeSlider.css"></require>
<require from="ion-rangeslider/css/ion.rangeSlider.skinNice.css"></require>
Now you can use your attribute in input in any view
<require from="./rangeslider"></require>
<input rangeslider type="text" value.bind="yourInitialSliderValue">