Change Slider Value with a Label-CodePudding

So I created a Slider which displays it's value to a label as you can see below. I want to add the option to change the slider value (position) with the label, so I made the label editable with contenteditable="true" - Now to change the value of the slider with my value in the label I thought of something like:

Thought:

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

I can get the value in my console for the function: console.log($(this).html()) But all my tries to apply it to my slider failed, maybe it's because I started JS recently..

HTML:

<div >
    <input id="CV_SP1"  type="range" value="0.4" min="0.1" max="1" step="0.05">
    <label contenteditable="true" id="cv_slider" >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();

CodePudding user response：

Hello try below snippet hope some modifications will fix this issue

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);
        });

        range.on('input', function() {
            $(this).next(value).html(this.value * 100);
        });
    });
};

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 >
    <input id="CV_SP1"  type="range" value="0.4" min="0.1" max="1" step="0.05">
    <label contenteditable="true" id="cv_slider" >0</label>mm
</div>
<div >
    <input id="CV_SP2"  type="range" value="0.4" min="0.1" max="1" step="0.05">
    <label contenteditable="true" id="cv_slider" >0</label>mm
</div>
<div >
    <input id="CV_SP3"  type="range" value="0.4" min="0.1" max="1" step="0.05">
    <label contenteditable="true" id="cv_slider" >0</label>mm
</div>