如何設置 HTML5 范圍輸入的樣式，使其在 React 中的滑塊前后具有不同的顏色？

Question

我正在使用 HTML5 在 React 中創建一個范圍滑塊，並希望在滑塊前后有兩種不同的顏色，我嘗試使用 css 但它沒有工作，請參閱演示我想要像這樣的圖像

圖片

有什么幫助嗎？

Answer 1

我只是想澄清一下，這只是一個 CSS 修復。 上面的鏈接當然解決了如何概念化進度或范圍元素，然后設置樣式。

對於 React，您可以根據滑塊值的百分比來選擇路線，甚至可以使用styled-components 。 然而，這個 fork是我上周鏈接的資源中的一個簡單的復制粘貼工作。 樣式不同，但您可以根據需要對其進行調整。 我建議查看規則和選擇器以了解它們之間的關系、它們具體涉及的內容以及如何調整它們以適應它們。