pepel_xD's questions

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xEEEEEE);
camera.position.x = -50;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);

let loader = new THREE.FontLoader();
loader.load('./helvetiker_regular.typeface.json', (font) => {
    let geometry = new THREE.TextGeometry('enemy', {
        font: font,
        size: 1,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    });
    let material = new THREE.MeshPhongMaterial({color: 0xcccccc});
    let header = new THREE.Mesh(geometry, material);
    scene.add(header);
    renderer.render(scene, camera);

    document.body.appendChild(renderer.domElement);

});

function roomsSincGuest(param1, param2) {
  return function (event) {
    var value = param1.value;
    var options = param2.options;
    var optionsLength = options.length;

    for (var i = 0; i < optionsLength; i++) {
      options[i].disabled = true;
      if (+options[i].value === 0 && +value === 100) {
        options[i].selected = true;
        options[i].disabled = false;
      }
      if (options[i].value < value && +options[i].value !== 0) {
        options[i].disabled = false;
      }
      if (options[i].value === value) {
        options[i].selected = true;
        options[i].disabled = false;
      }
    }
  };
}

var first = document.querySelector('#first');
var second = document.querySelector('#second');

first.addEventListener('change', roomsSincGuest(first, second));

<form>
  <select id="first" name="first">
    <option value="1" selected="">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="100">100</option>
  </select>

  <select id="second" name="second">
    <option value="3" selected="" >3</option>
    <option value="2" >2</option>
    <option value="1">1</option>
    <option value="0">0</option>
  </select>
</form>

[
  {
    title: "Одежда",
    left: 1,
    right: 22
  },
  {
    title: "Мужская",
    left: 2,
    right: 9
  },
  {
    title: "Женская",
    left: 10,
    right: 21
  },
  {
    title: "Костюмы",
    left: 3,
    right: 8
  },
  {
    title: "Платья",
    left: 11,
    right: 16
  },
  {
    title: "Юбки",
    left: 17,
    right: 18
  },
  {
    title: "Блузы",
    left: 19,
    right: 20
  },
  {
    title: "Брюки",
    left: 4,
    right: 5
  },
  {
    title: "Жакеты",
    left: 6,
    right: 7
  },
  {
    title: "Вечерние",
    left: 12,
    right: 13
  },
  {
    title: "Летние",
    left: 14,
    right: 15
  }
];

<ul>
  <li>Одежда
    <ul>
      <li>Мужская
        <ul>
          <li>Костюмы
            <ul>
              <li>Брюки</li>
              <li>Жакеты</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Женская
        <ul>
          <li>Платья
            <ul>
              <li>Вечерние</li>
              <li>Летние</li>
            </ul>
          </li>
          <li>Юбки</li>
          <li>Блузы</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

var fileNames = new Set();
var files = [];
var destination = new Set();
//console.log(matches)
matches.forEach((item, i, arr) => {
  if (item.includes(config.spritesFolder)) {
    var pos = item.indexOf(config.spritesFolder);
    var start = item.indexOf('/', pos) + 1;
    var end = item.indexOf('/', start);
    fileNames.add(item.slice(start, end));
    destination.add(item.slice(0, pos));
  }
});
var i = 0;
fileNames.forEach((item, it, arr) => {
  files[i] = {};
  files[i].data = [];
  files[i].fileName = item;
  for (var j = 0; j < matches.length; j++) {
    if (matches[j].indexOf(item) != -1) {
      files[i].data.push(matches[j]);
    }
  }
  i++;
});
for (var i = 0; i < files.length; i++) {
  files[i].destPath = '';
  destination.forEach((item, it, arr) => {
    if (files[i].data[0].indexOf(item) != -1) {
      files[i].destPath = item.replace(config.path.src.dir, config.path.build.dir);
    }
  });
}
console.dir(files)

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;
    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;
      }
    } 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;
      }
    }
    elem.style.left = left + 'px';
    this.inner.style.width = this.maxBtn.offsetLeft - this.minBtn.offsetLeft + 'px';
  }

  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>

//соханим начальные настройки
var def = Object.assign({}, this.curSet);
// выберем все брейкпоинты из настроек
var query = [];
for (var key in def.media) {
  query.push(def.media[key].point);
}
// фукция устанавливает настройки для запуска
function setNewSettigs(mql) {
  var newSet = Object.assign({}, def);
  for (var key in newSet.media) {
    for (var prop in newSet.media[key]) {
      if (newSet.media[key][prop] == mql.media) { // вот здесь в IE10+ всегда false
        for (var set in newSet.media[key].settings) {
          if (set in newSet) {
            newSet[set] = newSet.media[key].settings[set];
          }
        }
      }
    }
  }
  return newSet;
}
// функция производит действия при совпадении медиа выражения
function run(mql) {
  if (mql.matches) {
    this.curSet = Object.assign({}, setNewSettigs(mql));
    console.log(this.curSet)
    this.start();
    console.log(mql.media)
  } else {
    this.curSet = Object.assign({}, def);
    this.start();
  }
}
// создадим медиа запросы и повесим обработчики на них
query.forEach(function(item, i, arr) {
  var mql = window.matchMedia(arr[i]);
  mql.addListener(run.bind(this));
  run.call(this, mql);
}, this);