<input type="range" name="range" value="30" min="0" max="100" id="inputRange" class="inputRange" />.inputRange {
appearance: none;
width: 200px;
height: 12px;
border: 1px solid #333333;
border-radius: 9999px;
background: linear-gradient(90deg, #377494 30%, #dddddd 30%);
cursor: pointer;
}
/* ツマミ：Chrome, Safari, Edge用 */
.inputRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border: 2px solid #333333;
border-radius: 9999px;
background: #06b6d4;
box-shadow: none;
}
/* ツマミ：Firefox用 */
.inputRange::-moz-range-thumb {
width: 24px;
height: 24px;
border: 2px solid #333333;
border-radius: 9999px;
background: #06b6d4;
box-shadow: none;
}const inputRange = document.getElementById("inputRange");
const activeColor = "#377494";
const inactiveColor = "#dddddd";
inputRange.addEventListener("input", function() {
const ratio = (this.value - this.min) / (this.max - this.min) * 100;
this.style.background = `linear-gradient(90deg, ${activeColor} ${ratio}%, ${inactiveColor} ${ratio}%)`;
});const activeColor = "#377494";
const inactiveColor = "#dddddd";
$("#inputRange").on("input", function() {
const ratio = (this.value - this.min) / (this.max - this.min) * 100;
$(this).css("background", `linear-gradient(90deg, ${activeColor} ${ratio}%, ${inactiveColor} ${ratio}%)`);
});
