How to import ion-rangeslider in Aurelia

问题

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?

回答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.

回答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

回答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">

来源：https://stackoverflow.com/questions/36508480/how-to-import-ion-rangeslider-in-aurelia

标签

aurelia