需要帮助将下拉菜单更改为范围滑块。任何帮助将不胜感激

Question

我想将此价格范围下拉代码更改为价格范围滑块。尝试了很多但没有运气。任何人都可以帮助我吗？

<div class="form-group">

   <select name="priceFrom" id="priceFrom" class="form-control">

      <option value="0">From</option>

         <?php for ($i=200000; $i <= 9000000; $i+=100000): ?>

            <option value="<?php echo $i; ?>"<?php if ($_GET['priceFrom'] == $i) {

               echo ' selected';

            } ?>>$<?php echo $i; ?></option>

            <?php endfor; ?>

   </select>

</div>

<div class="form-group">

   <select name="priceTo" id="priceTo" class="form-control">

      <option value="0">To</option>

      <?php for ($i=200000; $i <= 9000000; $i+=100000): ?>

         <option value="<?php echo $i; ?>"<?php if ($_GET['priceTo'] == $i) {

            echo ' selected';

         } ?>>$<?php echo $i; ?></option>

      <?php endfor; ?>

   </select>

</div>

Answer 1

考虑以下。$(function() {&nbsp; $(".slider").change(function() {&nbsp; &nbsp; var v = $(this).val();&nbsp; &nbsp; $(this).next(".value").html(v + "000000");&nbsp; &nbsp; if ($(this).is("#priceFrom")) {&nbsp; &nbsp; &nbsp; $("#priceTo").attr("min", v).val(v).trigger("change");&nbsp; &nbsp; }&nbsp; });});.form-group label {&nbsp; width: 60px;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="form-group">&nbsp; <label>FROM</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceFrom" /> <span class="value">2000000<span></div><div class="form-group">&nbsp; <label>TO</label> <input type="range" min="2" max="9" value="2" class="slider" id="priceTo" /> <span class="value">2000000<span></div>在这里您可以看到 HTML 和 jQuery 代码协同工作以帮助调整一个或另一个滑块。