根据选择框中的所选类别更新范围滑块

Question

我想根据先前的选择更新范围滑块。我有兴趣点的数据，归类为学校，大学，学费，医院等。首先，用户将选择兴趣点category(filter)，然后我要为选定的POI层。请检查我的代码。谢谢。

var map = new mapboxgl.Map({
  container: "map",
  style:
  "https://openmaptiles.github.io/klokantech-basic-gl-style/style-cdn.json",
  center: [75, 18],
  zoom: 6
  // bearing;360
});
map.once("style.load", function() {
  map.addLayer({
    id: "point",
    source: {
      type: "geojson",
      data:
      "https://raw.githubusercontent.com/sharseema/data/master/trail_new.json"
    },
    type: "circle",
    paint: {
      "circle-color": "blue",
      // "cicle-radius":50
      "circle-radius": 8
    }
  });
});

map.on("load", function(e) {
  var select, prevalue, select1, select2, select3, option, op, ul, li;
  select = $("#category");
  var feature = map.queryRenderedFeatures(e.point, { layers: ["point"] });
  for (var j = 0; j < feature.length; j++) {
    var alloption = select.children("option");
    option = alloption.filter("[value='" + feature[j].properties.Type + "']");
    if (option.length == 0) {
      select.append(
        '<option value="' +
        feature[j].properties.Type +
        '">' +
        feature[j].properties.Type +
        "</option>"
      );
    }
  }
  $("#category").on("change", function() {
    var i;
    if (prevalue != select) {
      for (i = 0; i < feature.length; i++) {
        var layer = $(this).val();
        if (layer == feature[i].properties.Type) {
          map.flyTo({
            center: [feature[i].properties.Long, feature[i].properties.Lat],
            zoom: 10
          });
          var t = feature[i].properties.Type;
          var type = map.setFilter("point", ["==", "Type", t]);
          var heightlight = {
            property: "Type",
            type: "categorical",
            stops: [[t, "#EEFF41"]]
          };
          map.setPaintProperty("point", "circle-color", heightlight);

        }
      }
    }
  });
  //range slider
  function getVals() {
    var parent = this.parentNode;
    var slides = document.getElementsByTagName("input");
    var slide1 = parseFloat(slides[0].value); //min value
    var slide2 = parseFloat(slides[1].value); //max value
    map.setFilter("point", [
      "all",
      [">=", ["number", ["get", "Fees"]], slide1],
      ["<=", ["number", ["get", "Fees"]], slide2]
    ]);
    
    var displayElement = document.getElementsByClassName("rangeValues")[0];
    displayElement.innerHTML = slide1 + "RS" + "---------" + slide2 + "RS";
  }
  // window.onload = function(){
  // Initialize Sliders
  var sliderSections = document.getElementsByClassName("range-slider");
  for (var x = 0; x < sliderSections.length; x++) {
    var sliders = sliderSections[x].getElementsByTagName("input");
    for (var y = 0; y < sliders.length; y++) {
      if (sliders[y].type === "range") {
        sliders[y].oninput = getVals;
        // Manually trigger event first time to display values
        sliders[y].oninput();
      }
    }
  }
});

#map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100px;
}

section.range-slider {
  position: relative;
  width: 300px;
  height: 300px;
  float: left;
  text-align: center;

  /*color: #ffffff;*/
  /*  z-index: 9999;*/
}
section.range-slider input[type="range"] {
  pointer-events: none;
  position: absolute;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 14px;
  background: #f1efef;
  box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
  -webkit-box-shadow: inset 0 1px 0 0 #cdc6c6, inset 0 -1px 0 0 #d9d4d4;
  overflow: hidden;
  left: 0;
  top: 50px;
  width: 300px;
  outline: none;
  height: 20px;
  margin: 0;
  padding: 0;
}
section.range-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 14px;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #dad8da),
    color-stop(100%, #413f41)
  );
  /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top, #dad8da 0, #413f41 100%);
  /* older mobile safari and android > 2.2 */
  background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
  /* W3C */
}
section.range-slider input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 14px;
  background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
  /* W3C */
}
section.range-slider input[type="range"]::-ms-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -ms-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 14px;
  border: 0;
  background-image: linear-gradient(to bottom, #dad8da 0, #413f41 100%);
  /* W3C */
}
section.range-slider input[type="range"]::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: black;
  border: 0;
}
section.range-slider input[type="range"]:last-of-type::-moz-range-track {
  -moz-appearance: none;
  background: none transparent;
  border: 0;
}
section.range-slider input[type="range"]::-moz-focus-outer {
  border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css" rel="stylesheet"/>

<div id='map'></div>
<div id="leftpanel">
  <select id="category" class="selection">
		<option selected="ture" disabled="disabled">--Select Type--</option>
	</select>

  <section class="range-slider" style="height: 100px">
    <span class="rangeValues"></span>
    <!-- <select id="min"></select> -->
    <input value="1000" min="1000" max="80000" step="500" type="range">
    <input value="80000" min="1000" max="80000" step="500" type="range">
  </section>