Range 滑块
使用方法
input默认的range类型在各浏览器下形态各异，本框架借助css统一了外观(chrome无法美化进度部分，用户需另写JS控制)，可跟普通表单混用。
音量：
音量：
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">音量：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group">
<div class="ax-flex-row">
<div class="ax-form-label">音量：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range" disabled></div>
</div>
</div>
</div>
通过简单js可控制range游标变化，或在页面输出range的值。
音量：
-
<script type='text/javascript'> $(document).ready(function () { $('#volBtn').click(function () { $('#volInput').val("20"); }); $('#volOutput').bind('input propertychange', function() { $('#volVal').html($(this).val() + '%'); }); }); </script> -
<div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量：</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" id="volInput"></div> </div> <a href="###" class="ax-form-btn ax-btn ax-text" id="volBtn">点击值变成20</a> </div> </div> <div class="ax-break-md"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">音量：</div> <div class="ax-form-con"> <div class="ax-form-input"><input type="range" value="30" id="volOutput"></div> </div> <span class="ax-form-txt ax-color-ignore" id="volVal">30%</span> </div> </div>
range跟其他表单控件一样支持多个尺寸，默认是ax-md（高38px），其他可用ax-xs（高22px），ax-sm（高28px）和ax-lg（高48px）。
音量xs：
音量sm：
音量lg：
<div class="ax-form-group ax-xs">
<div class="ax-flex-row">
<div class="ax-form-label">音量xs：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-sm">
<div class="ax-flex-row">
<div class="ax-form-label">音量sm：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<div class="ax-form-group ax-lg">
<div class="ax-flex-row">
<div class="ax-form-label">音量lg：</div>
<div class="ax-form-con">
<div class="ax-form-input"><input type="range"></div>
</div>
</div>
</div>
<div class="ax-break-md"></div>
<input type="range" class="ax-xs">
<input type="range" class="ax-sm">
<input type="range" class="ax-lg">
插件滑块 PLUGIN
使用了第三方插件ion.rangeSlider，该插件在Github很受欢迎，使用简单直接，参数全面，能满足绝大多数场景需求，本框架使用的版本是v2.3.1。API和具体使用方法见其官网ion.rangeSlider或Github。
本框架根据插件说明自制了皮肤，修改了原css，参见演示效果。
使用前先引用基础文件。
<script src="https://src.axui.cn/v1.0/src/plugins/rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/rangeSlider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
默认：
加刻度：
加限制：
两个：
$("#slider01").ionRangeSlider({
skin: "ax"
});
$("#slider02").ionRangeSlider({
skin: "ax",
grid:true,
});
$("#slider03").ionRangeSlider({
skin: "ax",
min: 0,
max: 1000,
from: 500,
grid: true,
from_min: 250,
from_max: 750,
from_shadow: true
});
$("#slider04").ionRangeSlider({
skin: "ax",
type: "double",
min: 0,
max: 1000,
from: 400,
to: 600,
drag_interval: true,
min_interval: null,
max_interval: null
});
联动 PLUGIN
与其他input联动。
var sliderS = $("#slider05"),
sliderSinputfrom = $("#slider05-from"),
sliderScase,
sliderSmin = 0,
sliderSmax = 1000,
sliderSfrom = 0;
sliderS.ionRangeSlider({
skin: "ax",
min: sliderSmin,
max: sliderSmax,
from: 500,
onStart: updateS,
onChange: updateS
});
sliderScase = sliderS.data("ionRangeSlider");
function updateS (data) {
from = data.from;
sliderSinputfrom.prop("value", from);
}
sliderSinputfrom.on("input", function () {
var val = $(this).prop("value");
if (val < sliderSmin || val == sliderSmin) {
val = sliderSmin;
} else if (val > sliderSmax || val == sliderSmax) {
val = sliderSmax;
}
sliderScase.update({
from: val
});
});
$("#sliderSbtn").on("click", function () {
var val = $(this).attr("data-from");
sliderSinputfrom.val(val);
sliderScase.update({
from: val
});
});
var sliderD = $("#slider06"),
sliderDinputfrom = $("#slider06-from"),
sliderDinputto = $("#slider06-to"),
sliderDcase,
sliderDmin = 0,
sliderDmax = 1000,
sliderDfrom = 0,
sliderDto = 0;
sliderD.ionRangeSlider({
skin: "ax",
type: "double",
min: sliderDmin,
max: sliderDmax,
from: 100,
to: 800,
onStart: updateD,
onChange: updateD
});
sliderDcase = sliderD.data("ionRangeSlider");
function updateD (data) {
from = data.from;
to = data.to;
sliderDinputfrom.prop("value", from);
sliderDinputto.prop("value", to);
}
sliderDinputfrom.on("input", function () {
var val = $(this).prop("value");
if (val < sliderDmin || val == sliderDmin) {
val = sliderDmin;
} else if (val > sliderDmax || val == sliderDmax) {
val = sliderDmax;
}
sliderDcase.update({
from: val
});
});
sliderDinputto.on("input", function () {
var val = $(this).prop("value");
if (val < sliderDfrom) {
val = sliderDfrom;
} else if (val > sliderDmax) {
val = sliderDmax;
}
sliderDcase.update({
to: val
});
});
$("#sliderDbtn").on("click", function () {
var valfrom = $(this).attr("data-from");
var valto = $(this).attr("data-to");
sliderDinputfrom.val(valfrom);
sliderDinputto.val(valto);
sliderDcase.update({
from: valfrom,
to: valto
});
});
禁用 PLUGIN
默认是disable:false，disable:true使用可禁用滑块。
禁用：