Así que creé un control deslizante que muestra su valor en una etiqueta, como puede ver a continuación. Quiero agregar la opción para cambiar el valor del control deslizante (posición) con la etiqueta, así que hice que la etiqueta fuera editable con contenteditable="true" . Ahora, para cambiar el valor del control deslizante con mi valor en la etiqueta, pensé en algo como :
pensamiento :
$('#cv_slider').on('input', function () { //function }) Puedo obtener el valor en mi consola para la función: console.log($(this).html()) Pero todos mis intentos de aplicarlo a mi control deslizante fallaron, tal vez sea porque comencé JS recientemente.
html :
<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>J.S .:
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();Hola, prueba el siguiente fragmento, espero que algunas modificaciones solucionen este problema.
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 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>