diff --git a/index.html b/index.html index b546ee2..68c6629 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
- 50 +
diff --git a/slider.css b/slider.css index 3718a97..fff6aec 100644 --- a/slider.css +++ b/slider.css @@ -40,7 +40,7 @@ input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(155, 73, 146, 0.4); } -.selected { +input[type="number"] { margin-right: 16px; background-color: #f53b57; width: 80px; @@ -51,7 +51,7 @@ input[type="range"]:active::-webkit-slider-thumb { position: relative; } -.selected::after { +input[type="number"]::after { content: ""; display: block; border-top: 8px solid transparent; diff --git a/slider.js b/slider.js index f134cd2..6e80e5e 100644 --- a/slider.js +++ b/slider.js @@ -1,13 +1,13 @@ const sliderEl = document.querySelector("#slider-input") -const selectedEl = document.querySelector(".selected") +const selectedEl = document.querySelector("#weight-input") sliderEl.addEventListener("input", () => { //根据滑块值修改填写值 - selectedEl.innerHTML = sliderEl.value; + selectedEl.value = sliderEl.value; }); selectedEl.addEventListener("input", () =>{ //根据输入修改滑块值 - sliderEl.innerHTML = selectedEl.value; + sliderEl.value = selectedEl.value; }) /*