jQuery UI Slider 不改变默认值

Posted 2023-05-08

【中文标题】jQuery UI Slider 不改变默认值

【英文标题】：jQuery UI Slider not changing default Value

【发布时间】：2020-01-31 18:28:21

【问题描述】：

我已经用 jQuery UI 设置了一个滑块，并显示了正确的默认值 60。但滑块仍然在最左边。它应该移动到值 60。

https://imgur.com/a/QXfzugs

尝试了 *** 上的不同选项，但没有任何帮助。

var gewichtSlider = $("#gewicht-slider").slider(
    min: 40,
    max: 200,
    slide: function(event, ui) 
        $("#gewicht").val(ui.value).trigger('change');
        $("#gewicht-label").text(ui.value);
        $("#gewicht-handle").text(ui.value + ' kg');
    
);
gewichtSlider.slider('option', 'slide').call(gewichtSlider, null, value: 60);

滑块没有移动。

JSfiddle：https://jsfiddle.net/tz6pea5c/

【问题讨论】：

60 似乎非常接近最小值 (40) 如果将其设置为 100，它会移动吗？

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

@Twisty：请看 jsfiddle：jsfiddle.net/tz6pea5c

@MickVader 我为此创建了一个小提琴。不管是什么默认值，它总是在左边。

【参考方案1】：

滑块的默认值是使用value 属性设置的。要在标签中显示初始值，您需要添加一个 create 回调，该回调在滑块初始化后立即调用。然后，您需要添加一个slide 回调来响应滑动事件并相应地更改标签的值。最后，我删除了一个隐藏的输入字段，并向您展示了如何通过单击按钮从滑块本身中检索一个值。如果您需要将值保存在隐藏的输入字段中，则可以像这样修改setSliderValue 函数：

function setSliderValue(value) 
  $sliderLabel.text(value + " kg");
  $("#your-hidden-field-id").val(value);

下面是完整的工作示例：

var defaultValue = 60;
var $sliderLabel = $(".slider-after");

function setSliderValue(value) 
  $sliderLabel.text(value + " kg");


var $gewichtSlider = $("#gewicht-slider").slider(
    min: 40,
    max: 200,
    value: defaultValue,
    create: function() 
      setSliderValue(defaultValue);
    ,
    slide: function(event, ui) 
    	setSliderValue(ui.value);
    
);

$("#current-value").click(function() 
	alert($gewichtSlider.slider( "value" ) + " kg");
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>


<div class="gewicht-container question-container">
  <label for="gewicht">Wie schwer bist du?</label>
  <p class="question-desc">Dies ist eine wichtige Angabe für die Matraztenhärte. Daten werden nicht gespeichert ;)</p>

  <div class="slider">
    <div class="slider-before">
      Gewicht
    </div>
    <div id="gewicht-slider">
      <div id="gewicht-handle" class="ui-slider-handle"></div>
    </div>
    <div class="slider-after">
    </div>
    <div class="clearfix"></div>
  </div>

  <hr/>
  <button id="current-value">Get current value</button>
</div>

【讨论】：

很好，但是句柄不包含这个值。设置值后有没有办法触发“幻灯片”？

【参考方案2】：

这是一个工作示例：https://jsfiddle.net/Twisty/34eg1xc9/21/

JavaScript

var gewichtSlider = $("#gewicht-slider");
gewichtSlider.slider(
  min: 40,
  max: 200,
  create: function(e, ui) 
    $("#gewicht-handle").css(
      width: "3em",
      textAlign: "center"
    ).text('60 kg');
    gewichtSlider.slider('value', 60);
  ,
  slide: function(event, ui) 
    $("#gewicht").val(ui.value).trigger('change');
    $("#gewicht-handle").text(ui.value + ' kg');
  
);

我在您的代码中找不到$("#gewicht-label")。我还使用了create 回调来设置滑块。