I am using jquery simple slider(https://github.com/loopj/jquery-simple-slider), its having onchange event for the slider. But not having the mouseup event. I am calling ajax request when the slider is moved. This is my currect code.
$("#MyId").bind("slider:changed", function (event, data) {
// The currently selected value of the slider
alert(data.value);
// The value as a ratio of the slider (between 0 and 1)
alert(data.ratio);
});
Onchange event is triggered several times when I move the slider. I am new to jquery, so can't figure out how to change the source code for mouseup event. I have also researched about this and I found a issue raised in the following link. https://github.com/loopj/jquery-simple-slider/pull/19/files But that doesn't seem to work. Thanks in advance.
This is my html code.
<input type="text" id="MyId" name="Myname" value=""/>" perdata-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" ><span></span><span class="output">0</span>
This is my javascript:
<script>
$(function () {
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(1));
});
});
</script>
<script>
$(function () {
$("[perdata-slider]")
.each(function () {
var input = $(this);
$("<span>")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(0));
});
});
</script>
There is a mouseup event on line 91 into the file I downloaded from jquery-simple-slider :
.mouseup(function(e, data) {
Just adding this return the value when mouseup is triggered :
}).mouseup(function(e) {
if (_this.dragging) {
alert(_this.value) //Added line
_this.dragging = false;
_this.dragger.removeClass("dragging");
return $("body").css({
cursor: "auto"
});
}
});
Edit 1 :
You can call a function sending the value:
}).mouseup(function(e, data) {
if (_this.dragging) {
myAjaxFunction(_this.value)//Added line
_this.dragging = false;
_this.dragger.removeClass("dragging");
return $("body").css({
cursor: "auto"
});
}
});
And create your own ajax function that will be triggered on mouseup event:
function myAjaxFunction(returnedValue){
alert("I just release the plot, and the value is: "+returnedValue);
//your Ajax stuffs
}
EDIT 2:
Ok, so your HTML seems to be wrong. Here is what I understand :
HTML (perdata-slider replaced with data-slider for the slider to work):
<input type="text" id="MyId" name="Myname" value="" data-slider="true" data-slider-range="0,100" data-slider-highlight="true" data-slider-step="1" /><span></span><span class="output">0</span>
JS (I removed the perdata-slider part became useless):
$(function () {
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(1));
});
});
And now, the JS for the source plugin file at js/simple-slider.js (be sure you are not calling the minified version of the plugin into your page : <script src="js/simple-slider.js"></script> and not <script src="js/simple-slider.min.js"></script>) :
/*
jQuery Simple Slider
Copyright (c) 2012 James Smith (http://loopj.com)
Licensed under the MIT license (http://mit-license.org/)
*/
var __slice = [].slice,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
(function($, window) {
var SimpleSlider;
SimpleSlider = (function() {
function SimpleSlider(input, options) {
var ratio,
_this = this;
this.input = input;
this.defaultOptions = {
animate: true,
snapMid: false,
classPrefix: null,
classSuffix: null,
theme: null,
highlight: false
};
this.settings = $.extend({}, this.defaultOptions, options);
if (this.settings.theme) {
this.settings.classSuffix = "-" + this.settings.theme;
}
this.input.hide();
this.slider = $("<div>").addClass("slider" + (this.settings.classSuffix || "")).css({
position: "relative",
userSelect: "none",
boxSizing: "border-box"
}).insertBefore(this.input);
if (this.input.attr("id")) {
this.slider.attr("id", this.input.attr("id") + "-slider");
}
this.track = this.createDivElement("track").css({
width: "100%"
});
if (this.settings.highlight) {
this.highlightTrack = this.createDivElement("highlight-track").css({
width: "0"
});
}
this.dragger = this.createDivElement("dragger");
this.slider.css({
minHeight: this.dragger.outerHeight(),
marginLeft: this.dragger.outerWidth() / 2,
marginRight: this.dragger.outerWidth() / 2
});
this.track.css({
marginTop: this.track.outerHeight() / -2
});
if (this.settings.highlight) {
this.highlightTrack.css({
marginTop: this.track.outerHeight() / -2
});
}
this.dragger.css({
marginTop: this.dragger.outerHeight() / -2,
marginLeft: this.dragger.outerWidth() / -2
});
this.track.mousedown(function(e) {
return _this.trackEvent(e);
});
if (this.settings.highlight) {
this.highlightTrack.mousedown(function(e) {
return _this.trackEvent(e);
});
}
this.dragger.mousedown(function(e) {
if (e.which !== 1) {
return;
}
_this.dragging = true;
_this.dragger.addClass("dragging");
_this.domDrag(e.pageX, e.pageY);
return false;
});
$("body").mousemove(function(e) {
if (_this.dragging) {
_this.domDrag(e.pageX, e.pageY);
return $("body").css({
cursor: "pointer"
});
}
}).mouseup(function(e, data) {
if (_this.dragging) {
alert(_this.value)
_this.dragging = false;
_this.dragger.removeClass("dragging");
return $("body").css({
cursor: "auto"
});
}
});
this.pagePos = 0;
if (this.input.val() === "") {
this.value = this.getRange().min;
this.input.val(this.value);
} else {
this.value = this.nearestValidValue(this.input.val());
}
this.setSliderPositionFromValue(this.value);
ratio = this.valueToRatio(this.value);
this.input.trigger("slider:ready", {
value: this.value,
ratio: ratio,
position: ratio * this.slider.outerWidth(),
el: this.slider
});
}
SimpleSlider.prototype.createDivElement = function(classname) {
var item;
item = $("<div>").addClass(classname).css({
position: "absolute",
top: "50%",
userSelect: "none",
cursor: "pointer"
}).appendTo(this.slider);
return item;
};
SimpleSlider.prototype.setRatio = function(ratio) {
var value;
ratio = Math.min(1, ratio);
ratio = Math.max(0, ratio);
value = this.ratioToValue(ratio);
this.setSliderPositionFromValue(value);
return this.valueChanged(value, ratio, "setRatio");
};
SimpleSlider.prototype.setValue = function(value) {
var ratio;
value = this.nearestValidValue(value);
ratio = this.valueToRatio(value);
this.setSliderPositionFromValue(value);
return this.valueChanged(value, ratio, "setValue");
};
SimpleSlider.prototype.trackEvent = function(e) {
if (e.which !== 1) {
return;
}
this.domDrag(e.pageX, e.pageY, true);
this.dragging = true;
return false;
};
SimpleSlider.prototype.domDrag = function(pageX, pageY, animate) {
var pagePos, ratio, value;
if (animate == null) {
animate = false;
}
pagePos = pageX - this.slider.offset().left;
pagePos = Math.min(this.slider.outerWidth(), pagePos);
pagePos = Math.max(0, pagePos);
if (this.pagePos !== pagePos) {
this.pagePos = pagePos;
ratio = pagePos / this.slider.outerWidth();
value = this.ratioToValue(ratio);
this.valueChanged(value, ratio, "domDrag");
if (this.settings.snap) {
return this.setSliderPositionFromValue(value, animate);
} else {
return this.setSliderPosition(pagePos, animate);
}
}
};
SimpleSlider.prototype.setSliderPosition = function(position, animate) {
if (animate == null) {
animate = false;
}
if (animate && this.settings.animate) {
this.dragger.animate({
left: position
}, 200);
if (this.settings.highlight) {
return this.highlightTrack.animate({
width: position
}, 200);
}
} else {
this.dragger.css({
left: position
});
if (this.settings.highlight) {
return this.highlightTrack.css({
width: position
});
}
}
};
SimpleSlider.prototype.setSliderPositionFromValue = function(value, animate) {
var ratio;
if (animate == null) {
animate = false;
}
ratio = this.valueToRatio(value);
return this.setSliderPosition(ratio * this.slider.outerWidth(), animate);
};
SimpleSlider.prototype.getRange = function() {
if (this.settings.allowedValues) {
return {
min: Math.min.apply(Math, this.settings.allowedValues),
max: Math.max.apply(Math, this.settings.allowedValues)
};
} else if (this.settings.range) {
return {
min: parseFloat(this.settings.range[0]),
max: parseFloat(this.settings.range[1])
};
} else {
return {
min: 0,
max: 1
};
}
};
SimpleSlider.prototype.nearestValidValue = function(rawValue) {
var closest, maxSteps, range, steps;
range = this.getRange();
rawValue = Math.min(range.max, rawValue);
rawValue = Math.max(range.min, rawValue);
if (this.settings.allowedValues) {
closest = null;
$.each(this.settings.allowedValues, function() {
if (closest === null || Math.abs(this - rawValue) < Math.abs(closest - rawValue)) {
return closest = this;
}
});
return closest;
} else if (this.settings.step) {
maxSteps = (range.max - range.min) / this.settings.step;
steps = Math.floor((rawValue - range.min) / this.settings.step);
if ((rawValue - range.min) % this.settings.step > this.settings.step / 2 && steps < maxSteps) {
steps += 1;
}
return steps * this.settings.step + range.min;
} else {
return rawValue;
}
};
SimpleSlider.prototype.valueToRatio = function(value) {
var allowedVal, closest, closestIdx, idx, range, _i, _len, _ref;
if (this.settings.equalSteps) {
_ref = this.settings.allowedValues;
for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) {
allowedVal = _ref[idx];
if (!(typeof closest !== "undefined" && closest !== null) || Math.abs(allowedVal - value) < Math.abs(closest - value)) {
closest = allowedVal;
closestIdx = idx;
}
}
if (this.settings.snapMid) {
return (closestIdx + 0.5) / this.settings.allowedValues.length;
} else {
return closestIdx / (this.settings.allowedValues.length - 1);
}
} else {
range = this.getRange();
return (value - range.min) / (range.max - range.min);
}
};
SimpleSlider.prototype.ratioToValue = function(ratio) {
var idx, range, rawValue, step, steps;
if (this.settings.equalSteps) {
steps = this.settings.allowedValues.length;
step = Math.round(ratio * steps - 0.5);
idx = Math.min(step, this.settings.allowedValues.length - 1);
return this.settings.allowedValues[idx];
} else {
range = this.getRange();
rawValue = ratio * (range.max - range.min) + range.min;
return this.nearestValidValue(rawValue);
}
};
SimpleSlider.prototype.valueChanged = function(value, ratio, trigger) {
var eventData;
if (value.toString() === this.value.toString()) {
return;
}
this.value = value;
eventData = {
value: value,
ratio: ratio,
position: ratio * this.slider.outerWidth(),
trigger: trigger,
el: this.slider
};
return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
};
return SimpleSlider;
})();
$.extend($.fn, {
simpleSlider: function() {
var params, publicMethods, settingsOrMethod;
settingsOrMethod = arguments[0], params = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
publicMethods = ["setRatio", "setValue"];
return $(this).each(function() {
var obj, settings;
if (settingsOrMethod && __indexOf.call(publicMethods, settingsOrMethod) >= 0) {
obj = $(this).data("slider-object");
return obj[settingsOrMethod].apply(obj, params);
} else {
settings = settingsOrMethod;
return $(this).data("slider-object", new SimpleSlider($(this), settings));
}
});
}
});
return $(function() {
return $("[data-slider]").each(function() {
var $el, allowedValues, settings, x;
$el = $(this);
settings = {};
allowedValues = $el.data("slider-values");
if (allowedValues) {
settings.allowedValues = (function() {
var _i, _len, _ref, _results;
_ref = allowedValues.split(",");
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
x = _ref[_i];
_results.push(parseFloat(x));
}
return _results;
})();
}
if ($el.data("slider-range")) {
settings.range = $el.data("slider-range").split(",");
}
if ($el.data("slider-step")) {
settings.step = $el.data("slider-step");
}
settings.snap = $el.data("slider-snap");
settings.equalSteps = $el.data("slider-equal-steps");
if ($el.data("slider-theme")) {
settings.theme = $el.data("slider-theme");
}
if ($el.attr("data-slider-highlight")) {
settings.highlight = $el.data("slider-highlight");
}
if ($el.data("slider-animate") != null) {
settings.animate = $el.data("slider-animate");
}
return $el.simpleSlider(settings);
});
});
})(this.jQuery || this.Zepto, this);
Alert() is at line 93.