计算两个滑块之间的值范围

function Range(container) {
  this.container = container;
  if (!this.container) return;
  this.inputMin = container.querySelector('[data-type=input-min]');
  this.inputMax = container.querySelector('[data-type=input-max]');
  this.minValue = parseFloat(container.querySelector('[data-type=min-val]').textContent.replace(/\s/g, ''));
  this.maxValue = parseFloat(container.querySelector('[data-type=max-val]').textContent.replace(/\s/g, ''));
  this.inner = container.querySelector('[data-type=range-inner-element]');
  this.valuesElem = container.querySelector('[data-type=range-element]');
  this.minBtn = container.querySelector('[data-type=min-btn]');
  this.maxBtn = container.querySelector('[data-type=max-btn]');

  //console.log(this);
  this.init();
}
Range.prototype.drag = function(event) {
  function move(event) {
    var left = event.pageX - elemX - boxX;
    var target;
    if (elem == this.minBtn) {
      this.inner.style.left = elem.offsetLeft + elem.offsetWidth / 2 + 'px';
      if (left < 0) {
        left = 0;
      }
      if (left > this.maxBtn.offsetLeft - elem.offsetWidth) {
        left = this.maxBtn.offsetLeft - elem.offsetWidth;
      }
		target = this.container.querySelector('[data-type=min-val]');
    } else if (elem == this.maxBtn) {
      this.inner.style.right = elem.offsetLeft - elem.offsetWidth / 2 + 'px';
      if (left < this.minBtn.offsetLeft + elem.offsetWidth) {
        left = this.minBtn.offsetLeft + elem.offsetWidth;
      }
      if (left > this.valuesElem.offsetWidth - elem.offsetWidth) {
        left = this.valuesElem.offsetWidth - elem.offsetWidth;
      }
		target = this.container.querySelector('[data-type=max-val]');
    }
    elem.style.left = left + 'px';
    this.inner.style.width = this.maxBtn.offsetLeft - this.minBtn.offsetLeft + 'px';

    target.innerText = this.minValue + (this.maxValue - this.minValue)*(left/this.valuesElem.offsetWidth);
  }

  function removeMove() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', removeMove);
  }
  if (event.target == this.minBtn || event.target == this.maxBtn) {
    var elem = event.target;
    var elemX = event.pageX - elem.getBoundingClientRect().left;
    var boxX = this.valuesElem.getBoundingClientRect().left;
    var coord = event.target.offsetLeft;
    move = move.bind(this);
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', removeMove);
    event.target.ondragstart = function() {
      return false;
    };
  }
}
Range.prototype.setValue = function() {
  this.inputMin.value = this.minValue;
  this.inputMax.value = this.maxValue;
}
Range.prototype.init = function() {
  this.inner.style.left = this.minBtn.offsetLeft + this.minBtn.offsetWidth / 2 + 'px';
  this.inner.style.right = this.maxBtn.offsetLeft - this.maxBtn.offsetWidth / 2 + 'px';
  this.setValue();
  this.valuesElem.addEventListener('mousedown', this.drag.bind(this));
}
var range = new Range(document.querySelector('[data-type=range]'));

.filters_section_list {
  width: 300px;
  list-style: none
}

.filters_section_item .range {
  height: 6px;
  background-color: #AEAEAE;
  border-radius: 4px;
  position: relative;
}

.filters_section_item .range_inner {
  height: inherit;
  background-color: #FD2016;
}

.filters_section_item .range_btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
  position: absolute;
  top: -7px;
  background-color: #fff;
  cursor: pointer;
}

.filters_section_item .range_inner {
  position: absolute;
  width: 100%;
}

.filters_section_item .range_btn[data-type=min-btn] {
  left: 0;
}

.filters_section_item .range_btn[data-type=max-btn] {
  left: 100%;
}

.filters_section_item .values {
  overflow: hidden;
  margin-top: 40px;
}

.filters_section_item .values .min-value {
  float: left;
  width: 35%;
  text-align: left;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #ACACAC;
}

.filters_section_item .values .max-value {
  float: right;
  width: 35%;
  text-align: right;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #ACACAC;
}

<ul class="filters_section_list" data-type="box-content">
  <li class="filters_section_item" data-type="range">
    <input id="price-min" type="hidden" name="price-min" value="0" data-type="input-min">
    <input id="price-max" type="hidden" name="price-max" value="1000000" data-type="input-max">
    <div class="range" data-type="range-element">
      <div class="range_inner" data-type="range-inner-element"></div>
      <div class="range_btn" data-type="min-btn"></div>
      <div class="range_btn" data-type="max-btn"></div>
    </div>
    <div class="values">
      <span class="min-value" data-type="min-val">0</span>
      <span class="max-value" data-type="max-val">1000000</span>
    </div>
  </li>
</ul>