input type="range" ジェネレーター

• HTML
• CSS
• JavaScript
• jQuery

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

コピーする