我這里有一個非常簡單的范圍滑塊： https: //jsfiddle.net/dv45kseb/我希望能夠動態顯示 50% 的滑塊值，但<h3>我不確定是否要開始。body { color: #404040; padding: 50px; max-width: 500px; margin: 0 auto; text-align: center; font-family: sans-serif;}h1 { font-weight: 300;}#helper { float: left; margin-top: 20px; color: #46b7d5; font-style: italic;}output { display: block; font-size: 3em;}/* original css */.rangeslider,.rangeslider__fill { display: block; -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}.rangeslider { background: #e6e6e6; position: relative;}.rangeslider--horizontal { height: 20px; width: 100%;}.rangeslider--vertical { width: 20px; min-height: 150px; max-height: 100%;}.rangeslider--disabled { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4;}.rangeslider__fill { background: -webkit-linear-gradient(left, #abe0ed, #46b7d5); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #abe0ed, #46b7d5); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, #abe0ed, #46b7d5); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #abe0ed, #46b7d5); /* Standard syntax (must be last) */ position: absolute;}.rangeslider--horizontal .rangeslider__fill { top: 0; height: 100%;}.rangeslider--vertical .rangeslider__fill { bottom: 0; width: 100%;}
配置 Javascript 范圍滑塊
瀟湘沐
2023-07-29 15:03:34
