Php 自定义搜索框，其中一个具有滑动功能，可接受2个或多个输入

我想在我自己的网站上实现这种搜索框-。 （在“节省”下，从此处开始）

这是如何与滑动水平输入和2个其他输入一起工作的，其中一个具有下拉效果？我想知道所有这些东西是如何结合起来进行搜索的

你知道这方面的一些教程吗？或者你能帮我做一些吗

---

提前非常感谢。

基于Vlad Preda的评论，我得到了一个代码，并对其进行了轻微编辑，创建了一个滑块函数，该函数为我提供了一个变量（比如范围23到109），它回答了我的部分问题

<div>
      <input id="cost" name="cost" type="range" min=23 max=109 value=93 style="width: 40%;">
      <output for="cost">1</output>
</div>

1.

现在我需要将其与另一个输入（字符串，例如商店名称）一起用作输入

我如何将这两个元素结合起来，以获得合适的搜索结果

JavaScript代码-

$(function() {
       var el, newPoint, newPlace, offset;
       $("input[type='range']").change(function() {
         el = $(this);
         width = el.width();
         newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
         offset = -1.3;
         if (newPoint < 0) { newPlace = 0;  }
         else if (newPoint > 1) { newPlace = width; }
         else { newPlace = width * newPoint + offset; offset -= newPoint;}
         el
           .next("output")


           .text(el.val());
       })
       .trigger('change');
     });

$（函数（）{
变量el、新点、新位置、偏移量；
$（“输入[type='range']”）。更改（函数（）{
el=$（本）；
宽度=标高宽度（）；
newPoint=（el.val（）-el.attr（“最小”）/（el.attr（“最大”）-el.attr（“最小”））；
偏移量=-1.3；
如果（newPoint<0）{newPlace=0；}
如果（newPoint>1）{newPlace=width；}
else{newPlace=width*newPoint+offset；offset-=newPoint；}
埃尔
.next（“输出”）
.text（el.val（））；
})
.触发（“变更”）；
});

---

我想有一个变量e1.val（）已经得到了更新的值，我需要将它与另一个输入结合起来，并将这两个参数传递给搜索变量。

这是一个具有多个输入字段的表单。如何使用这些字段的逻辑取决于您。谢谢Vlad Preda！您能告诉我如何获得滑动功能并将这些函数组合在一起吗？您可以使用各种javascript库。定制它们是你必须自己做的事情。检查后，我做了一些修改，我在下面的回答栏中提到了这些修改。