Значения из слайдера

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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) { 
        if (_this.dragging) { 
          _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);</script>

.slider { 
  width: 300px; 
} 
 
.slider > .dragger { 
  background: #8DCA09; 
  background: -webkit-linear-gradient(top, #8DCA09, #72A307); 
  background: -moz-linear-gradient(top, #8DCA09, #72A307); 
  background: linear-gradient(top, #8DCA09, #72A307); 
 
  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); 
  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); 
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2); 
 
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px; 
  border-radius: 10px; 
 
  border: 1px solid #496805; 
  width: 16px; 
  height: 16px; 
} 
 
.slider > .dragger:hover { 
  background: -webkit-linear-gradient(top, #8DCA09, #8DCA09); 
} 
 
 
.slider > .track, .slider > .highlight-track { 
  background: #ccc; 
  background: -webkit-linear-gradient(top, #bbb, #ddd); 
  background: -moz-linear-gradient(top, #bbb, #ddd); 
  background: linear-gradient(top, #bbb, #ddd); 
 
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); 
 
  -webkit-border-radius: 8px; 
  -moz-border-radius: 8px; 
  border-radius: 8px; 
 
  border: 1px solid #aaa; 
  height: 4px; 
} 
 
.slider > .highlight-track { 
	background-color: #8DCA09; 
	background: -webkit-linear-gradient(top, #8DCA09, #72A307); 
	background: -moz-linear-gradient(top, #8DCA09, #72A307); 
	background: linear-gradient(top, #8DCA09, #72A307); 
	 
	border-color: #496805; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" data-slider="true" data-slider-values="3, 5, 10, 15, 20, 25, 30" data-slider-equal-steps="true" data-slider-snap="true"> 
  <div> 
    <script> 
       $("[data-slider]") 
          .each(function () { 
            var input = $(this); 
            $("<span>") 
              .addClass("output") 
              .insertAfter($(this)); 
          }) 
          .bind("slider:ready slider:changed", function (event, data) { 
             $(this) 
              .nextAll(".output:first") 
              .html(data.value); 
              if (document.getElementById(data.value).style.display == "none") 
              {document.getElementById(data.value).style.display = "block"} 
              else 
              {document.getElementById(data.value).style.display = "none"} 
          }); 
     </script> 
  </div> 
  <div id="3">3</div> 
  <div id="5">5</div> 
  <div id="10">10</div> 
  <div id="15">15</div> 
  <div id="20">20</div> 
  <div id="25">25</div> 
  <div id="30">30</div>