【解決方法】クリックするまでフローティングするレンジスライダーを作成するにはどうすればよいですか

ユーザーの注意を引くには、ユーザーがホバーするかクリックするまでレンジスライダーボタンを上下に動かす必要があります。

次に、ホバリングすると、垂直方向の動きが一時停止します。

クリックすると完全に停止します。

範囲スライダーの最大値は 100、最小値は 0、デフォルトは 50 です。

したがって、50 の位置に浮くはずです。

私が試したこと：

次のコードは私が持っているものですが、デフォルトでフローティングする代わりに、範囲スライダーが非表示に表示されます…何か提案はありますか?

HTMLは次のとおりです。

HTML

<pre><div id="slider-container">
  <input type="range" id="myRange" min="0" max="100" value="50">
</div>

JS は次のとおりです。

var slider = document.getElementById("myRange");
var container = document.getElementById("slider-container");

// Add floating class by default
slider.classList.add("floating");

// toggle floating class on hover
slider.addEventListener("mouseover", function() {
  if (slider.classList.contains("floating")) {
    slider.classList.remove("floating");
  } else {
    slider.classList.add("floating");
  }
});

// remove floating class on click
slider.addEventListener("click", function() {
  if (slider.classList.contains("floating")) {
    slider.classList.remove("floating");
  }
});

CSSは次のとおりです。

CSS

#slider-container {
  position: relative;
  /* other styling */
}

#myRange::-webkit-slider-thumb {
  transition: all 0.3s ease-in-out;
  /* other styling */
}

#myRange.floating::-webkit-slider-thumb {
  position: relative;
  top: -30px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

解決策 2

コードの問題は、「フローティング」クラスがデフォルトで範囲スライダーに追加されていることですが、スライダーのつまみの初期位置が「フローティング」クラスの位置と一致するように設定されていないため、非表示に見えます。

これを修正するには、デフォルトの変換プロパティを #myRange::-webkit-slider-thumb CSS ルールに追加して、スライダーのつまみの初期位置を「フローティング」クラスの位置と一致するように設定します。

さらに、ホバー時に「フローティング」クラスを切り替える代わりに、別のクラスを追加できます。たとえば、ユーザーがスライダーの上にホバーしたときに追加される「一時停止」としましょう。

JS および CSS コードを更新して目的の動作を実現する方法の例を次に示します。

JS:

JavaScript

var slider = document.getElementById("myRange");
var container = document.getElementById("slider-container");

// Add floating class by default
slider.classList.add("floating");

// add paused class on hover
slider.addEventListener("mouseover", function() {
  slider.classList.add("paused");
});

// remove paused class on mouse out
slider.addEventListener("mouseout", function() {
  slider.classList.remove("paused");
});

// remove floating class on click
slider.addEventListener("click", function() {
  slider.classList.remove("floating");
});

CSS:

CSS

#slider-container {
  position: relative;
  /* other styling */
}

#myRange::-webkit-slider-thumb {
  transition: all 0.3s ease-in-out;
  transform: translateY(-30px);
  /* other styling */
}

#myRange.floating::-webkit-slider-thumb {
  position: relative;
  top: -30px;
  animation: float 3s ease-in-out infinite;
}

#myRange.paused::-webkit-slider-thumb {
    animation-play-state: paused;
}

@keyframes float {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-30px);
  }
}