Question

我有一个范围滑块，我希望将数据滑块属性添加到输入字段，因为数字增加或将span值添加到输入字段：

<div class="small-10 medium-11 columns">
   <div class="range-slider" data-options="display_selector: #sliderOutput3;" data-slider="35">
      <span class="range-slider-handle" tabindex="0" role="slider" style="transform: translateX(287.75px);"></span>
      <span class="range-slider-active-segment" style="width: 35%;"></span>
   </div>
</div>
<div class="small-2 medium-1 columns">
   <span id="sliderOutput3">35</span>
</div>
<input id="donationamount" type="text" value="50" name="donationamount">

我尝试了这个，但它没有设置值：

$('#sliderOutput3').on('change', function() {
   var tc =  $('#sliderOutput3').text();
   $('#donationamount').val(tc);
});

Answer 1

<强> HTML：

<div class="small-10 medium-11 columns">
    <div class="range-slider" data-options="display_selector: #sliderOutput3;" data-slider="35">
        <span class="range-slider-handle" tabindex="0" role="slider" style="transform: translateX(287.75px);"></span>
        <span class="range-slider-active-segment" style="width: 35%;"></span>
    </div>
</div>


<div class="small-2 medium-1 columns">
    <span id="sliderOutput3">35</span>
</div>
<input id="donationamount" type="text" value="50" name="donationamount">
<br>
<input id="donationamount2" type="text" value="50" name="donationamount2">

<强> jQuery的：

$('#sliderOutput3').ready(function() {
    //example 1
        var tc =  $('#sliderOutput3').text();
        $('#donationamount').val(tc);

   //example 2
        var dataSlider = $(".range-slider").attr("data-slider");
        $('#donationamount2').val(dataSlider);
});

EXAMPLE

可以吗？

获取范围的值并将值添加到输入字段

1 个答案: