Estoy tratando de dejar que el color del rango cambie de verde a rojo cuando las personas mueven el control deslizante de 100 a 0. Uso el control deslizante JS Round ( https://roundsliderui.com/document.html ).
MRE está aquí: https://codepen.io/chapkovski/pen/gORmrbR Pero se ve así:
$("#slider1").roundSlider({ sliderType: "min-range", value: 80, // svgMode: true, valueChange: "changeColor", }); function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } var sliderObj = $("#slider1").data("roundSlider"); function changeColor(e) { const val = e.value * 2.55; sliderObj.rangeColor = rgbToHex(255 - val, val, 0); }¿Qué estoy haciendo mal?
En su demostración hay algunos problemas, por lo que es posible que deba corregir las siguientes cosas:
$("#slider1").roundSlider("option", "rangeColor", rgbToHex(255 - val, val, 0)); OR $("#slider1").roundSlider({"rangeColor": rgbToHex(255 - val, val, 0) }); OR sliderObj.option("rangeColor", rgbToHex(255 - val, val, 0));https://roundsliderui.com/document.html#how-to-use-options
e.value * 2.55 , pero esto devolverá el valor flotante. Pero el código de color hexadecimal no aceptará el valor flotante. Así que haz que este valor sea redondo. Math.round(e.value * 2.55)svgMode: true , debería estar habilitado.Y una sugerencia más, puede actualizar a la v1.6.1 para una mejor mejora.