离子-范围

离子-范围（Ion-Range）是一个简单的选择范围交互控件，能够让用户通过鼠标拖动滑块的方式来选择一个数值范围。它被广泛应用于选取价格范围、年龄范围、数量范围等场景中。

基本用法

要使用离子-范围控件，需要在 HTML 代码中添加以下内容：

<div class="ion-range-slider"></div>

并在 JavaScript 中调用这个 div 的 ionRangeSlider 方法，这个方法接收一个配置对象，用于自定义离子-范围的初始状态、最小值、最大值等属性。

$(".ion-range-slider").ionRangeSlider({
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    type: 'double',
    prefix: '$',
    postfix: '.00',
    grid: true
});

其中，min 和 max 属性是必须的，它们分别表示离子-范围控件的数值范围的最小值和最大值。from 和 to 属性则表示控件的初始数值范围，可以通过这两个属性来设置控件的默认选中值。type 属性表示控件的类型，可以是单选或者双选。prefix 和 postfix 属性用于设置数值前缀和后缀，比如美元符号或者小数点。grid 属性用于显示网格线，方便用户选择。

高级用法

除了基本用法之外，离子-范围还支持许多高级用法，如自定义滑块样式、自定义事件、设置禁用等。下面是一些常见的高级用法示例：

自定义滑块样式

离子-范围控件的滑块样式默认是一个简单的白色方块。如果想要自定义滑块的样式，可以添加自定义 CSS 样式来实现。

.irs-handle {
    background-color: #ff0000;
    border: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff0000;
}

自定义事件

离子-范围控件支持多种事件，如值变化事件、初始化事件、拖动事件等。开发者可以通过监听 these 事件来实现自定义行为。

$(".ion-range-slider").ionRangeSlider({
    onStart: function (data) {
        console.log("Slider is started. Current value is " + data.from);
    },
    onChange: function (data) {
        console.log("Slider value is changed. Current value is " + data.from);
    },
    onFinish: function (data) {
        console.log("Slider is finished. Current value is " + data.from);
    }
});

禁用

如果想要禁用离子-范围控件，可以通过调用 destroy 方法来实现。

var slider = $(".ion-range-slider").ionRangeSlider();
slider.data("ionRangeSlider").destroy();