jqueryslidermouseup

mouseUp For Jquery Simple Slider is not working


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>

Solution

  • 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.