网上看到的一款原生slider插件，觉得挺好用，https://github.com/mohammadFe...
<script src="javascript/r-slider.js"></script>引入插件
<div id="container1"></div>html
样式可以自己写一下
var mySlider2 = new slider({
// container element
container: "#container1",
// start/end values
start: 0,
end: 2000000,
// custom step
step: 1,
// initial value
value: 1500000,
ondrag: onDragChange2,
});
mySlider2.init();初始化插件
function onDragChange2(obj) {
$("#e").html(obj.values[0]);
}拖拽事件
obj为滑块对象，取值可通过obj.values[0]来取。
如果是移动端，初始化时需要添加isMobile属性；
if (!IsPC()) {
console.log('移动端')
mySlider2 = new slider({
// container element
container: "#container1",
start: 0,
end: 2000000,
// custom step
step: 1,
// initial value
isMobile: true,
value: 1500000,
ondrag: onDragChange2,
});
mySlider2.init();
mySlider3 = new slider({
// container element
container: "#container2",
// start/end values
start: 0,
end: 90,
isMobile: true,
// custom step
step: 1,
// initial value
value: 30,
ondrag: onDragChange3,
});
mySlider3.init();
} else {
console.log('不是移动端')
mySlider2 = new slider({
// container element
container: "#container1",
start: 0,
end: 2000000,
// custom step
step: 1,
// initial value
isMobile: false,
value: 1500000,
ondrag: onDragChange2,
});
mySlider2.init();
mySlider3 = new slider({
// container element
container: "#container2",
// start/end values
start: 0,
end: 90,
isMobile: false,
// custom step
step: 1,
// initial value
value: 30,
ondrag: onDragChange3,
});
mySlider3.init();
}动态初始化。
如果这个插件在移动端使用时报错，可以复制下面我改的代码：
//////////r-slider.js//////////////
function slider(config) {
var a = {
state: {},
init: function (obj) {
this.setState(obj);
this.validateState();
this.updateState();
this.render();
},
setState: function (obj) {
for (var prop in obj) {
this.state[prop] = obj[prop];
}
},
validateState: function () {
var obj = this.state;
if (obj.container === undefined) {
alert("container is not defined");
return false;
}
var container = $(obj.container);
if (container === undefined) {
alert("$(container) is not defined");
return false;
}
if (obj.start === undefined) {
alert("start is not defined");
return false;
}
if (obj.end === undefined) {
alert("end is not defined");
return false;
}
if (obj.start > obj.end) {
alert("start is greater than end");
return false;
}
var position = container.css("position");
if (position === "static") {
container.css("position", "relative");
}
},
updateState: function () {
this.state.step = this.state.step || 1;
this.state.range = this.state.end - this.state.start;
if (this.state.min === undefined || this.state.min < this.state.start) {
this.state.min = this.state.start;
}
if (this.state.max === undefined || this.state.max > this.state.end) {
this.state.max = this.state.end;
}
if (this.state.value === undefined) {
this.state.value = [this.state.min];
}
if (typeof this.state.value === "number") {
this.state.value = [this.state.value];
}
for (var i = 0; i < this.state.value.length; i++) {
if (this.state.value[i] > this.state.max) {
this.state.value[i] = this.state.max;
}
if (this.state.value[i] < this.state.min) {
this.state.value[i] = this.state.min;
}
}
this.state.styleName = this.getStyleName();
this.state.style = this.getStyle(this.state.style);
this.state.text = this.state.text || [];
},
render: function () {
var container = $(this.state.container);
container.html("");
var str = '';
str += '<div class="r-slider-container" style="' + this.getcontainerstyle() + '">';
str += Pins({
start: this.state.start,
end: this.state.end,
styleName: this.state.styleName,
range: this.state.range,
pinStep: this.state.pinStep,
});
str += Labels({
start: this.state.start,
end: this.state.end,
range: this.state.range,
styleName: this.state.styleName,
labelStep: this.state.labelStep,
});
str += Line({
style: this.state.style,
styleName: this.state.styleName
});
var length = this.state.value.length;
for (var i = 0; i < length; i++) {
if (this.state.showFill !== false) {
if (this.state.value.length === 1 || i !== 0) {
str += Fill({
style: this.state.style,
index: i,
styleName: this.state.styleName,
value: this.state.value,
range: this.state.range,
start: this.state.start,
});
}
}
str += Space({
index: i,
value: this.state.value,
style: this.state.style,
styleName: this.state.styleName,
text: this.state.text,
range: this.state.range,
start: this.state.start,
vertical: this.state.vertical,
});
str += Button({
index: i,
value: this.state.value,
style: this.state.style,
styleName: this.state.styleName,
range: this.state.range,
start: this.state.start,
fixValue: this.state.fixValue,
showValue: this.state.showValue,
colors: this.state.colors
});
}
str += Space({
index: length,
value: this.state.value,
style: this.state.style,
styleName: this.state.styleName,
text: this.state.text,
start: this.state.start,
range: this.state.range
});
str += '</div>';
container.html(str);
if (this.state.changable !== false) {
this.eventHandler(container.find(".r-slider-button"), "mousedown", this.mousedown);
this.eventHandler(container.find(".r-slider-space"), "mousedown", this.mousedown);
this.eventHandler(container.find(".r-slider-label"), "mousedown", this.labelmousedown);
}
},
getStyleName: function () {
var styleName = {};
if (this.state.vertical === true) {
styleName.Thickness = "height";
styleName.Thickness_r = "width";
styleName.OtherSide = "left";
styleName.OtherSide_r = "right";
styleName.Axis = "y";
if (this.state.reverse === true) {
styleName.Sign = -1;
styleName.StartSide = "bottom";
styleName.EndSide = "top";
} else {
styleName.Sign = 1;
styleName.StartSide = "top";
styleName.EndSide = "bottom";
}
} else {
styleName.Thickness = "width";
styleName.Thickness_r = "height";
styleName.OtherSide = "top";
styleName.OtherSide_r = "bottom";
styleName.Axis = "x";
if (this.state.reverse === true) {
styleName.Sign = -1;
styleName.StartSide = "right";
styleName.EndSide = "left";
} else {
styleName.Sign = 1;
styleName.StartSide = "left";
styleName.EndSide = "right";
}
}
return styleName;
},
getStyle: function (obj) {
var style = {
button_width: 10,
button_height: 10,
line_width: 2,
margin: 0,
}, thickness = this.state.styleName.Thickness,
container = $(this.state.container);
if (style["button_" + thickness] > container[thickness]()) {
style["button_" + thickness] = container[thickness]()
}
// container.html('<div class="r-slider-button"></div>');
// var button = container.find(".r-slider-button");
// var borderWidth = button.css("borderWidth");
// style.button_border_width = parseInt(borderWidth);
// container.html('');
if (obj === undefined) {
return style;
}
for (prop in obj) {
style[prop] = obj[prop];
}
return style;
},
getClient: function (e, axis) {
if (this.state.isMobile) {
return e.originalEvent.changedTouches[0]["client" + axis];
}
else {
return e["client" + axis];
}
},
getValueByClick: function (e) {
var calc = new RSliderCalculator(this.state);
var inner = $(this.state.container).find(".r-slider-container");
if (this.state.vertical) {
if (this.state.reverse) {
var distance = inner.offset().top + this.height - this.getClient(e,"Y") - pageYOffset;
} else {
var distance = this.getClient(e,"Y") + pageYOffset - inner.offset().top;
}
} else {
if (this.state.reverse) {
var distance = inner.offset().left + this.width - this.getClient(e,"X") - pageXOffset;
} else {
var distance = this.getClient(e,"X") + pageXOffset - inner.offset().left;
}
}
return calc.getCorrectValue(calc.getValueByPixel(distance));
},
move: function (dir) {
var buttons = $(this.state.container).find(".r-slider-button");
for (var i = 0; i < this.state.value.length; i++) {
this.moveButtonTo(buttons.eq(i), this.state.step * dir, true);
}
if (this.state.ondrag !== undefined) {
this.state.ondrag({
values: this.state.value,
container: this.state.container,
});
}
},
setValue: function (value) {
if (!Array.isArray(value)) {
value = [value];
}
for (var i = 0; i < value.length; i++) {
if (value[i] > this.state.max) {
value[i] = this.state.max;
}
if (value[i] < this.state.min) {
value[i] = this.state.min;
}
}
this.state.value = value;
this.render();
},
getValue: function () {
return this.state.value;
},
mousedown: function (e) {
e.preventDefault();
var container = $(this.state.container);
var element = $(e.currentTarget);
var clickMode = element.attr("class");
var index = element.data("index");
container.find(".r-slider-button").css({ "zIndex": 1000 });
container.find(".r-slider-button[data-index=" + index + "]").css({ "zIndex": 10000 });
if (index === 0 && clickMode === "r-slider-space") {
this.move(-1);
} //اگر روی فضای خالی ابتدا کلیک شد
else if (index === this.state.value.length) {
this.move(1);
} //اگر روی فضای خالی انتها کلیک شد
else {
var container = $(this.state.container);
var button = container.find(".r-slider-button[data-index=" + index + "]");
var button_b = container.find(".r-slider-button[data-index=" + (index - 1) + "]");
var value = this.state.value[index];
var value_b = this.state.value[index - 1];
this.setWidthHeight();
this.state.startOffset = {
x: this.getClient(e,"X"),
y: this.getClient(e,"Y"),
value: value,
value_b: value_b,
button: button,
button_b: button_b,
clickMode: clickMode,
index: index,
};
if (clickMode === "r-slider-space") {
this.state.startOffset.diffrence = Math.abs(value - value_b);
}
this.eventHandler("window", "mousemove", this.mousemove);
}
container.find(".r-slider-number").show();
this.eventHandler("window", "mouseup", this.mouseup);
},
labelmousedown:function(e){
var value = parseFloat($(e.currentTarget).find("span").html());
this.setValue(value);
},
mousemove: function (e) {
var calc = new RSliderCalculator(this.state);
var so = this.state.startOffset,
index = so.index,
axis = this.state.styleName.Axis;
var change;
var offset = (this.getClient(e,axis.toUpperCase()) - so[axis]) * this.state.styleName.Sign;
var offsetValue = calc.getValueByPixel(offset);
if (so.clickMode === "r-slider-space") {
var value = calc.getCorrectValue(offsetValue + so.value);
var value_b = calc.getCorrectValue(offsetValue + so.value_b);
if (index > 1 && value_b < this.state.value[index - 2]) {
value_b = this.state.value[index - 2];
value = value_b + so.diffrence;
}
if (index < this.state.value.length - 1 && value > this.state.value[index + 1]) {
value = this.state.value[index + 1];
value_b = value - so.diffrence;
}
if (this.state.value[index - 1] === this.state.min && value < this.state.value[index]) {
value = this.state.min + so.diffrence;
}
if (this.state.value[index] === this.state.max && value_b > this.state.value[index - 1]) {
value_b = this.state.max - so.diffrence;
}
change = this.moveButtonTo(so.button, value, false);
this.moveButtonTo(so.button_b, value_b, false);
} else {
var value = calc.getCorrectValue(offsetValue + so.value);
change = this.moveButtonTo(so.button, value, false);
}
if (this.state.ondrag !== undefined && change) {
this.state.ondrag({
values: this.state.value,
container: this.state.container,
});
}
},
mouseup: function () {
if (this.state.fixValue !== true) {
$(this.state.container).find(".r-slider-number").fadeOut(100);
}
this.eventRemover("window", "mousemove", this.mousemove);
this.eventRemover("window", "mouseup", this.mouseup);
if (this.state.onchange !== undefined) {
this.state.onchange({
values: this.state.value,
container: this.state.container,
});
}
},
setWidthHeight: function () {
var inner = $(this.state.container).find(".r-slider-container");
this.state.width = inner.width();
this.state.height = inner.height();
},
moveButtonTo: function (button, value, offset) {
var calc = new RSliderCalculator(this.state);
if (offset === true) {
if (value === 0) {
return false;
}
value += parseFloat(button.attr("data-value"));
}
value = calc.getCorrectValue(value);
if (parseFloat(button.attr("data-value")) === value) {
return false
};
var index = button.data("index");
if (index > 0 && value < this.state.value[index - 1]) {
return false;
}
if (index < this.state.value.length - 1 && value > this.state.value[index + 1]) {
return false;
}
var sn = this.state.styleName;
var percent = calc.getPercentByValue(value);
var percent_b = calc.getPercentByValue(this.state.value[index - 1]) || 0;
var percent_a = calc.getPercentByValue(this.state.value[index + 1]) || 100;
var container = $(this.state.container);
var fill = container.find(".r-slider-fill[data-index=" + (index) + "]");
var fill_a = container.find(".r-slider-fill[data-index=" + (index + 1) + "]");
var space = container.find(".r-slider-space[data-index=" + (index) + "]");
var space_a = container.find(".r-slider-space[data-index=" + (index + 1) + "]");
var style = this.state.style;
var size = style['button_' + sn.Thickness];
button.css(sn.StartSide, 'calc(' + percent + '% - ' + (size / 2) + 'px');
fill.css(sn.Thickness, (percent - percent_b) + '%');
fill_a.css(sn.Thickness, (percent_a - percent) + '%');
fill_a.css(sn.StartSide, percent + '%');
space.css(sn.Thickness, (percent - percent_b) + '%');
space_a.css(sn.Thickness, (percent_a - percent) + '%');
space_a.css(sn.StartSide, percent + '%');
this.state.value[index] = value;
button.attr("data-value", value);
button.find(".r-slider-number").html(value);
return true;
},
/////////get template////////////////////
getcontainerstyle: function () {
var sn = this.state.styleName;
var style = this.state.style;
var size = style['button_' + sn.Thickness];
var size_r = style['button_' + sn.Thickness_r];
var str = 'position:absolute;';
//str += 'background:red;opacity:0.3;';
str += sn.StartSide + ':' + ((size / 2) + style.margin) + 'px;';
str += sn.OtherSide + ':calc(50% - ' + (size_r / 2) + 'px);';
str += sn.Thickness + ':calc(100% - ' + (size + (style.margin * 2)) + 'px);';
str += sn.Thickness_r + ':' + size_r + 'px;';
return str;
},
eventHandler: function (selector, event, action) {
if (this.state.isMobile) {
if (event === "mousedown") { event = "touchstart"; }
else if (event === "mousemove") { event = "touchmove"; }
else if (event === "mouseup") { event = "touchend"; }
}
if (selector === "window") { $(window).unbind(event, $.proxy(action, this)).bind(event, $.proxy(action, this)); }
else if (typeof selector === "string") { $(selector).unbind(event, $.proxy(action, this)).bind(event, $.proxy(action, this)); }
else { selector.unbind(event, $.proxy(action, this)).bind(event, $.proxy(action, this)); }
},
eventRemover: function (selector, event, action) {
if (this.state.isMobile) {
if (event === "mousedown") { event = "touchstart"; }
else if (event === "mousemove") { event = "touchmove"; }
else if (event === "mouseup") { event = "touchend"; }
}
if (selector === "window") { $(window).unbind(event, $.proxy(action, this)); }
else if (typeof selector === "string") { $(selector).unbind(event, $.proxy(action, this)); }
else { selector.unbind(event, $.proxy(action, this)); }
},
}
a.init(config);
return a;
}
function RSliderCalculator(obj) {
var a = {
state: {},
init: function (obj) {
for (prop in obj) {
this.state[prop] = obj[prop];
}
},
getPercentByValue: function (value) {
if (value === undefined) {
return undefined;
}
return 100 * (value - this.state.start) / (this.state.range) || 0;
},
getPercentByPixel: function (px) {
return Math.round(px * 100 / this.state[this.state.styleName.Thickness]);
},
getValueByPercent: function (percent) {
return ((this.state.range / 100) * percent) + this.state.start;
},
getValueByPixel: function (px) {
return (px * this.state.range) / this.state[this.state.styleName.Thickness];
},
getCorrectValue: function (value) {
value = (Math.round((value - this.state.start) / this.state.step) * this.state.step) + this.state.start;
if (value < this.state.min) {
value = this.state.min;
} else if (value > this.state.max) {
value = this.state.max;
}
value = parseFloat(value.toFixed(2));
return value;
},
}
a.init(obj);
return a;
}
function Pins(obj) {
var pinStep = obj.pinStep;
if (!pinStep) { return ""; }
var start = obj.start;
var styleName = obj.styleName;
var end = obj.end;
var range = obj.range;
var value = start;
var str = '';
var calc = new RSliderCalculator({
start: start,
range: range
});
while (value <= end) {
var percent = calc.getPercentByValue(value);
value += pinStep;
str += Pin({
styleName: styleName,
percent: percent
});
}
return str;
}
function Pin(obj) {
var sn = obj.styleName;
var percent = obj.percent;
function getStyle() {
var sstr = '';
sstr += 'position:absolute;';
sstr += sn.OtherSide + ':0;';
sstr += sn.Thickness_r + ':100%;';
sstr += sn.Thickness + ':1px;';
sstr += sn.StartSide + ':' + percent + '%;';
return sstr;
}
var str = '';
str += '<div class="r-slider-pin" style="' + getStyle() + '"></div>';
return str;
}
function Labels(obj) {
var labelStep = obj.labelStep;
if (!labelStep) { return ""; }
var start = obj.start;
var end = obj.end;
var styleName = obj.styleName;
var range = obj.range;
var value = start;
var calc = new RSliderCalculator({
start: start,
range: range
});
var str = '';
while (value <= end) {
var percent = calc.getPercentByValue(value);
str += Label({
styleName: styleName,
percent: percent,
value: value
});
value += labelStep;
}
return str;
}
function Label(obj) {
var sn = obj.styleName;
var percent = obj.percent;
var value = obj.value;
function getStyle() {
var sstr = 'position: absolute;line-height: 2px;text-align: center;';
sstr += sn.Thickness + ': 40px;';
sstr += sn.Thickness_r + ':2px;';
sstr += sn.StartSide + ':calc(' + percent + '% - 20px);';
return sstr;
}
var str = '';
str += '<div class="r-slider-label" style="' + getStyle() + '"><span>';
str += value;
str += '</span></div>';
return str;
}
function Fill(obj) {
var style = obj.style;
var index = obj.index;
var sn = obj.styleName;
var value = obj.value;
var range = obj.range;
var start = obj.start;
var calc = new RSliderCalculator({
start: start,
range: range
});
var percent = calc.getPercentByValue(value[index]);
var beforePercent = (index === 0) ? 0 : calc.getPercentByValue(value[index - 1]);
function getStyle() {
var str = 'position: absolute;z-index: 10;cursor: pointer;';
str += sn.Thickness + ':' + (percent - beforePercent) + '%;';
str += sn.StartSide + ':' + beforePercent + '%;';
str += sn.OtherSide + ':calc(50% - ' + (style.line_width / 2) + 'px);';
str += sn.Thickness_r + ':' + style.line_width + 'px;'
return str;
}
var str = '<div ';
str += 'data-index="' + index + '" ';
str += 'class="r-slider-fill" ';
str += 'style="' + getStyle() + '"';
str += '>';
str += '</div>';
return str;
}
function Space(obj) {
var index = obj.index;
var value = obj.value;
var style = obj.style;
var sn = obj.styleName;
var text = obj.text;
var range = obj.range;
var start = obj.start;
var vertical = obj.vertical;
var calc = new RSliderCalculator({
start: start,
range: range
});
var percent = calc.getPercentByValue(value[index]);
if (percent === undefined) {
percent = 100;
} //for end space
var beforePercent = (index === 0) ? 0 : calc.getPercentByValue(value[index - 1]);
function getStyle() {
var sstr = 'position:absolute;z-index:100;overflow: hidden;cursor:pointer;';
sstr += sn.Thickness + ':' + (percent - beforePercent) + '%;';
sstr += sn.StartSide + ':' + beforePercent + '%;';
sstr += sn.OtherSide + ':0;';
sstr += sn.Thickness_r + ':100%;';
return sstr;
}
var str = '';
str += '<div ';
str += 'data-index="' + index + '" ';
str += 'class="r-slider-space" ';
str += 'style="' + getStyle() + '"';
str += '>';
if (!vertical) {
str += this.Text({
index: index,
value: value,
style: style,
styleName: sn,
text: text
});
}
str += '</div>';
return str;
}
function Text(obj) {
var style = obj.style;
var value = obj.value;
var text = obj.text
var sn = obj.styleName;
var index = obj.index;
var length = value.length;
function getStyle() {
var size = style['button_' + sn.Thickness];
var tstr = 'position:absolute;text-align:center;';
if (index === 0) {
tstr += sn.Thickness + ':calc(100% - ' + size / 2 + 'px);';
tstr += sn.StartSide + ':0;';
tstr += sn.OtherSide + ':0;';
} else if (index === length) {
tstr += sn.Thickness + ':calc(100% - ' + size / 2 + 'px);';
tstr += sn.EndSide + ':0;';
tstr += sn.OtherSide + ':0;';
} else {
tstr += sn.Thickness + ':100%;';
}
tstr += 'line-height:' + style.button_height + 'px;';
return tstr;
}
var str = '';
str += '<div ';
str += 'data-index="' + index + '" ';
str += 'class="r-slider-text" ';
str += 'style="' + getStyle() + '"';
str += '>';
str += text[index] || "";
str += '</div>';
return str;
}
function Line(obj) {
var style = obj.style;
var sn = obj.styleName;
function getStyle() {
var str = 'position:absolute;z-index:1;';
str += sn.Thickness + ':100%;';
str += sn.StartSide + ':0;';
str += sn.OtherSide + ':calc(50% - ' + (style.line_width / 2) + 'px);';
str += sn.Thickness_r + ':' + style.line_width + 'px;'
return str;
}
return '<div class="r-slider-line" style="' + getStyle() + '"></div>';
}
function Button(obj) {
var value = obj.value;
var style = obj.style;
var sn = obj.styleName;
var index = obj.index;
var fixValue = obj.fixValue;
var showValue = obj.showValue;
var range = obj.range;
var start = obj.start;
var calc = new RSliderCalculator({
start: start,
range: range
});
var percent = calc.getPercentByValue(value[index]);
function getStyle() {
var size = style['button_' + sn.Thickness];
var str = '';
str += 'border:none;position:absolute;z-index: 1000;cursor:pointer;';
str += 'height:' + style.button_height + 'px;';
str += 'width:' + style.button_width + 'px;';
str += sn.StartSide + ':calc(' + percent + '% - ' + (size / 2) + 'px);';
str += sn.OtherSide + ':0;';
return str;
}
var str = '<div ';
str += 'data-index="' + index + '" ';
str += 'data-value="' + value[index] + '" ';
str += 'class="r-slider-button" ';
str += 'style="' + getStyle() + '"';
str += '>';
if (showValue) {
str += Number({
style: style,
value: value,
fixValue: fixValue,
index: index,
});
}
str += '</div>';
return str;
}
function Number(obj) {
var style = obj.style;
var value = obj.value;
var fixValue = obj.fixValue;
var index = obj.index;
function getStyle() {
var size = style.button_height;
var sstr = 'z-index: 1000;';
if (fixValue !== true) {
sstr += 'display:none;';
}
return sstr;
}
var str = '';
str += '<div ';
str += 'data-index="' + index + '" ';
str += 'style="' + getStyle() + '" ';
str += 'class="r-slider-number" ';
str += '>';
str += value[index];
str += '</div>';
return str;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。