如何使用滑块设置/连接滑块编号状态？
Posted
技术标签:
【中文标题】如何使用滑块设置/连接滑块编号状态？【英文标题】：How to set/connect the Slider Numbers states with the slider? 【发布时间】：2021-12-21 05:19:50 【问题描述】：滑块的左侧和右侧是状态（数字/价格），从以及直到您可以搜索多少产品（价格滑块/价格过滤器）。 但是数字是静态的，所以如果我使用滑块，那么数字保持不变...... 我想用滑块改变数字。 如何将数字与我的 Slider 连接起来？
请看这里（黄色标记）->SliderStates
[![在此处输入图片描述][1]][1]
这里是我的过滤器的 html 信息：
<form action="" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group">
<label for="price7068" class="control-label">Nach Preis</label>
<div class="slide">
<span>1</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 0%;"></div>
<div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
<div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 € - 4721 €</div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 0%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 47.2047%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">4721</div>
</div>
</div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
data-value="1,4721" style="display: none;">
<span>10000</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="product_rating4028" class="control-label">Nach Bewertung</label>
<div class="slide">
<span>0</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 20%;"></div>
<div class="slider-selection" style="left: 20%; width: 80%;"></div>
<div class="slider-track-high" style="right: 0px; width: 0%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 Sterne - 5 Sterne</div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 20%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 100%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">5</div>
</div>
</div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
data-slider-value="[0,5]" data-value="1,5" style="display: none;">
<span>5</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="marke2417" class="control-label">Nach Marke</label>
<select id="marke2417" name="marke[]" class="form-control" multiple="">
<option value="msi">MSI</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="kategorie5529" class="control-label">Nach Kategorie</label>
<select id="kategorie5529" name="kategorie" class="form-control">
<option value="">Kategorie wählen</option>
<option value="automotorrad">Auto & Motorrad</option>
<option value="babykinderwelt">Baby & Kinderwelt</option>
<option value="computersoftware">Computer & Software</option>
<option value="druckerscanner"> Drucker & Scanner</option>
<option value="3ddruckerk"> 3D-Drucker</option>
</select>
<div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
name="orderby" value="">
<div class="form-group form-group-block">
<a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
<button type="submit" class="btn btn-at">
Filtern </button>
</div>
<div class="clearfix"></div>
还有我的 Price-Slide-php-Code：
// values & steps
$values = at_field_database_min_max_value( $this->name, 'product' );
if ( isset( $this->field['min_value'] ) && $this->field['min_value'] != false ) $values->min = $this->field['min_value'];
if ( isset( $this->field['max_value'] ) && $this->field['max_value'] != false ) $values->max = $this->field['max_value'];
$steps = at_field_step_value( $values->min, $values->max, '', $this->name );
?>
<div class="form-group">
<label for="<?php echo $this->id; ?>" class="control-label"><?php echo $title ?></label>
<div class="slide">
<span><?php echo $values->min; ?></span>
<input id="<?php echo $this->id; ?>" name="<?php echo $this->name; ?>" data-slider-label="<?php echo apply_filters( 'at_filter_price_label', ' ' . at_get_default_currency( true ) ); ?>" type="text" class="bt-slider" value="<?php if ( $this->value )
echo $this->value;
?>" data-slider-min="<?php echo $values->min; ?>" data-slider-max="<?php echo $values->max; ?>" data-slider-step="<?php echo $steps; ?>" data-slider-value="[<?php if ( $this->value )
echo $this->value;
else
echo $values->min . ',' . $values->max;
?>]">
<span><?php echo $values->max; ?></span>
</div>
<?php echo( $instruction ? '<span class="filter-instruction">' . $instruction . '</span>' : '' ); ?>
<div class="clearfix"></div>
</div>
【问题讨论】：
【参考方案1】：用这个替换我之前提供给你的脚本：
let filterForm = document.querySelector("form.filterform");
if (null !== filterForm)
let waitS = setInterval(wait_sliders, 200);
function wait_sliders()
if (null !== filterForm.querySelector(".slider-handle"))
// Listen new values
let slides = filterForm.querySelectorAll('.slide');
var observer = new MutationObserver(function (mutations)
mutations.forEach(function (mutation)
if (mutation.type === "attributes")
let values = mutation.target.value.split(',');
let spans = mutation.target.closest('.slide').querySelectorAll('span');
spans[0].innerText = values[0];
spans[spans.length - 1].innerText = values[1];
);
);
slides.forEach(slide =>
let el = slide.querySelector('.bt-slider');
observer.observe(el, attributes: true );
);
filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) =>
let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
for (let i = 0; i < event.length; i++)
e.addEventListener(event[i], (e) =>
filterForm.querySelector('button[type="submit"]').click();
);
),
filterForm.querySelector('button[type="submit"]').click();
clearInterval(waitS);
【讨论】：
我不知道怎么做，但是所有 cmets 都被删除了.....我有一点：***.com/questions/69830458/…你能帮忙吗？ ***.com/questions/70611593/…你能帮我解决这个问题吗:)好吗？ 您好，我创建了以下过滤器：entdeckepreise.de/kategorie/minipcs 现在我在产品上方（桌面视图）有另一个过滤器可能性（排序或更改产品应如何显示的视图）-> 网格或列表视图。这不适用于 javascript 代码是否有可能在代码中实现这种排序？我希望你能帮助我，谢谢你提前！要知道我的意思，如果您访问 URL，您会在产品上方找到“Ansicht”（更改视图），而“Neuheiten”就是对产品进行排序（价格、名称等） 请帮帮我，如果你能解决我的排序问题就够了..拜托【参考方案2】：对于那些仍在寻找没有单独 javascript 代码的解决方案的人。没有编写 javascript 或 jquery 函数，几乎没有简单的解决方案：
1<input type="range" value="100" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<output>100</output>只用js做了一个新的解决方案
$(document).ready(function()
$("#slider").slider(
min: 1,
max: 100,
step: 1,
values: [1, 100],
slide: function(event, ui)
if ( ui.values[0] >= ui.values[1] )
return false;
else
for (var i = 0; i < ui.values.length; ++i)
document.getElementById("spanMin").textContent= ui.values[1];
document.getElementById("spanMax").textContent= ui.values[0];
);
$("input.sliderValue").change(function()
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
);
);body
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
.slidersStyle div, span
display: inline-block;
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form>
<div class="slidersStyle">
<span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
<div style="width:300px; margin-left: 15px; margin-right: 15px;" id="slider"> </div>
<span id="spanMin" class="sliderValue">100</span>
</div>
</form> $(document).ready(function()
$("#slider").slider(
min: 1,
max: 10000,
step: 1,
values: [1, 10000],
slide: function(event, ui)
if ( ui.values[0] >= ui.values[1] )
return false;
else
for (var i = 0; i < ui.values.length; ++i)
document.getElementById("spanMin").textContent= ui.values[1];
document.getElementById("spanMax").textContent= ui.values[0];
);
$("input.sliderValue").change(function()
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
);
); <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form action="https://entdeckepreise.de/filter/produktfilter/" method="GET" class="filterform form-inline"
data-ajax="true" data-id="5657" data-source-id="95">
<div class="form-group" style="margin: 50px;">
<label for="price7068" class="control-label">Nach Preis</label>
<div class="slide">
<span id="spanMax" style="display: inline-block;" class="sliderValue">1</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 0%;"></div>
<div class="slider-selection" style="left: 0%; width: 47.2047%;"></div>
<div class="slider-track-high" style="right: 0px; width: 52.7953%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="1" tabindex="0" style="left: 0%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="1"
aria-valuemax="10000" aria-valuenow="4721" tabindex="0" style="left: 47.2047%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 23.6024%; margin-left: -40px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 € - 4721 €</div>
<div style="width:300px; margin-left: 15px; margin-right: 15px;" id="slider"> </div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 0%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 47.2047%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">4721</div>
</div>
</div><input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
data-value="1,4721" style="display: none;">
<span id="spanMin" class="sliderValue">10000</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="product_rating4028" class="control-label">Nach Bewertung</label>
<div class="slide">
<span>0</span>
<div class="slider slider-horizontal" id="">
<div class="slider-track">
<div class="slider-track-low" style="left: 0px; width: 20%;"></div>
<div class="slider-selection" style="left: 20%; width: 80%;"></div>
<div class="slider-track-high" style="right: 0px; width: 0%;"></div>
<div class="slider-handle min-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="1" tabindex="0" style="left: 20%;"></div>
<div class="slider-handle max-slider-handle round" role="slider" aria-valuemin="0" aria-valuemax="5"
aria-valuenow="5" tabindex="0" style="left: 100%;"></div>
</div>
<div class="tooltip tooltip-main top" role="presentation" style="left: 60%; margin-left: -58.5px;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1 Sterne - 5 Sterne</div>
</div>
<div class="tooltip tooltip-min top" role="presentation"
style="left: 20%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">1</div>
</div>
<div class="tooltip tooltip-max top" role="presentation"
style="left: 100%; margin-left: 0px; display: none;">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">5</div>
</div>
</div><input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
data-slider-value="[0,5]" data-value="1,5" style="display: none;">
<span>5</span>
</div>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="marke2417" class="control-label">Nach Marke</label>
<select id="marke2417" name="marke[]" class="form-control" multiple="">
<option value="msi">MSI</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
</select>
<div class="clearfix"></div>
</div>
<div class="form-group">
<label for="kategorie5529" class="control-label">Nach Kategorie</label>
<select id="kategorie5529" name="kategorie" class="form-control">
<option value="">Kategorie wählen</option>
<option value="automotorrad">Auto & Motorrad</option>
<option value="babykinderwelt">Baby & Kinderwelt</option>
<option value="computersoftware">Computer & Software</option>
<option value="druckerscanner"> Drucker & Scanner</option>
<option value="3ddruckerk"> 3D-Drucker</option>
</select>
<div class="clearfix"></div>
</div>
<input type="hidden" name="paged" value="1"><input type="hidden" name="layout" value=""><input type="hidden"
name="orderby" value="">
<div class="form-group form-group-block">
<a href="/" class="btn btn-xs btn-link filter-reset pull-right">Filter zurücksetzen</a>
<button type="submit" class="btn btn-at">
Filtern </button>
</div>
<div class="clearfix"></div>您的设计现在也在这里实现
$(document).ready(function()
$( "#slider-range" ).slider(
range: true,
min: 1,
max: 100,
values: [ 1, 100 ],
slide: function( event, ui )
$( "#min" ).val( ui.values[ 0 ] );
$( "#max" ).val( ui.values[ 1 ] );
);
);body
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
#min
width:14px;
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
border-radius: 50%!important;
.ui-slider .ui-slider-handle
width: 1.8em!important;
height: 1.8em!important;
.ui-slider-horizontal .ui-slider-handle
top: -0.45em!important;
.ui-widget-content
background: #dddddd!important;
.ui-widget-header
background: #9ac836!important;
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form>
<input type="text" id="min" value="1" readonly style="border:0; display:inline-block;">
<div id="slider-range" style="width:200px; margin:0px 25px; display: inline-block;" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style=""></div>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
<span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span>
</div>
<input type="text" id="max" value="100" readonly style="border:0; display:inline-block;">
</form>【讨论】：
不，它几乎和我的一样......如果你使用滑块，1 或 100（你的例子）应该改变值。不应生成额外的字段 您的代码很适合这样做：1100输出>$ 你也可以用两个点构建一个例子吗？一个从 1 位置开始，另一个从 100 位置开始？ @Leonwalker 是的，我刚刚做了一个，它比我做的另一个例子要复杂一些，希望对您有所帮助:) 谢谢你.. 但是我如何在我的 php 中实现这个功能呢？我已经添加了我的 PHP 代码以上是关于如何使用滑块设置/连接滑块编号状态？的主要内容，如果未能解决你的问题，请参考以下文章