小贝子编程

用标签改变滑块值



所以我创建了一个Slider，它显示了一个标签的值，如下图所示。我想添加选项来改变滑块的值(位置)与标签，所以我使标签可编辑的contenteditable="true"-现在改变滑块的值与我的值在标签我想到的东西:

认为:

$('#cv_slider').on('input', function () {
//function
})

我可以在控制台中获得功能的值:console.log($(this).html())但是我所有的尝试应用到我的滑块失败了，也许是因为我最近开始使用JS .

:

<div class="range-slider">
<input id="CV_SP1" class="range-slider__range" type="range" value="0.4" min="0.1" max="1" step="0.05">
<label contenteditable="true" id="cv_slider" class="range-slider__value">0</label>
</div>

JS:

var rangeSlider = function() {
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function() {
value.each(function() {
var value = $(this).prev().attr('value');
$(this).html(value * 100 + 'mm');
});
range.on('input', function() {
$(this).next(value).html(this.value * 100 + 'mm');
});
});
};
rangeSlider();

你好试试下面的代码片段希望一些修改将解决这个问题

var rangeSlider = function() {
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function() {
value.each(function() {
var value = $(this).prev().attr('value')* 100;
$(this).html(value.toFixed(2));
});
range.on('input', function() {
var val = this.value * 100;
$(this).next(value).html(val.toFixed(2));
});
});
};
rangeSlider();
$('.range-slider__value').on('input', function (e) {
var valSel = parseFloat($(this).text() / 100) || 0;
$(this).prev().val(valSel);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.css" integrity="sha512-Rp0yZ3NMh1xOUZ4VHYggmX4pq4ZJdpcOETH03qBD5qNDsqTBw1MzUnX0T5PcTJmr2mNTOmtbxsHaGwzjylNpHA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.css" integrity="sha512-FkNnPJevAkIHB3NqUiMadWNcoMcOCPQUMyF55JeAFZmPcSR6wK6TgZ0qL6bMrRqGNaaVS8CAwBYceORhdTUILQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js" integrity="sha512-BUlWdwDeJo24GIubM+z40xcj/pjw7RuULBkxOTc+0L9BaGwZPwiwtbiSVzv31qR7TWx7bs6OPTE5IyfLOorboQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="range-slider">
<input id="CV_SP1" class="range-slider__range" type="range" value="0.4" min="0.1" max="1" step="0.05">
<label contenteditable="true" id="cv_slider" class="range-slider__value">0</label>mm
</div>
<div class="range-slider">
<input id="CV_SP2" class="range-slider__range" type="range" value="0.4" min="0.1" max="1" step="0.05">
<label contenteditable="true" id="cv_slider" class="range-slider__value">0</label>mm
</div>
<div class="range-slider">
<input id="CV_SP3" class="range-slider__range" type="range" value="0.4" min="0.1" max="1" step="0.05">
<label contenteditable="true" id="cv_slider" class="range-slider__value">0</label>mm
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium