CSS瀹炵幇鑷畾涔夋粦鍔ㄦ潯(input)锛屽姩鎬佺洃鍚敼鍙樻暟鍊稽/span>

鏈夋椂鍊欐垜浠渶瑕佷竴涓粦鏉嗘粦鍔紝鍙互绉诲姩鐨勫悓鏃讹紝杩樿兘澶熻幏鍙栧埌浠庡皬鍒板ぇ鐨勬暟鍊硷紝濡傚浘锛欬/p>

鍚戝悗婊戝姩鍊艰秺澶э紝鑳藉鍋氬埌瀹炴椂鐩戝惉銆傛垜鐨勫彲鑳戒笉鏄渶浼樿В鍐虫柟妗堬紝浠呬緵澶у鍙傝€冿紒

浠ｇ爜濡備笅锛欬/p>

杩欐槸寤虹珛涓€涓猧nput鍏冪礌锛屾渶灏忓€间负0锛屾渶澶у€间负100锛屾瘡娆″姞1锛岄粯璁ゅ€间负10.

鏍峰紡濡備笅锛

input[type=鈥渞ange鈥漖 {
display: block;
-webkit-appearance: none;
background-color: #bdc3c7;
width: 150px;
height: 5px;
border-radius: 5px;
margin: 0 auto;
outline: 0;
}
input[type=鈥渞ange鈥漖::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #49a9ee;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
transition: 0.3s ease-in-out;
}
input[type=鈥渞ange鈥漖::-webkit-slider-thumb:hover {
background-color: white;
border: 2px solid #49a9ee;
}
input[type=鈥渞ange鈥漖::-webkit-slider-thumb:active {
transform: scale(1.6);

}

//js浠ｇ爜鐩戝惉鏁堟灉锛岄渶瑕佺粦瀹氱洃鍚簨浠讹紝浠ｇ爜濡備笅锛欬/p>

var elem = document.querySelector(鈥榠nput[type=鈥渞ange鈥漖鈥?;
//鑾峰彇涓€涓兂鏄剧ず鍊肩殑鏍囩锛屽苟涓斿垵濮嬪寲榛樿鍊稽br bdsfid="175"> var target = document.querySelector(鈥?value鈥?;
target.innerHTML = elem.value;

var rangeValue = function(){
var newValue = elem.value;
target.innerHTML = newValue;
}
//缁戝畾input鐩戝惉浜嬩欢

elem.addEventListener(鈥渋nput鈥? rangeValue);

浠ｇ爜缁撴潫锛侊紒

https://www.tuwenku.net/ 涓殑鍘嬬缉鍥剧墖鏂囦欢澶у皬灏辨槸鐢ㄧ殑姝や緥銆侟/p>

鐜板湪瀹炵幇鐨勬晥鏋滀负宸﹀皬鍙冲ぇ锛屽鏋滆瀹炵幇宸﹀ぇ鍙冲皬鐨勪簨浠讹紝鍙互杩欐牱鍐欙細

鏈€灏忎负-100锛屾渶澶т负0锛岄粯璁ゅ€间负-10锛孅/p>

js浠ｇ爜鐩戝惉鏁堟灉锛岄渶瑕佺粦瀹氱洃鍚簨浠讹紝浠ｇ爜濡備笅锛欬/p>

var elem = document.querySelector(鈥榠nput[type=鈥渞ange鈥漖鈥?;
//鑾峰彇涓€涓兂鏄剧ず鍊肩殑鏍囩锛屽苟涓斿垵濮嬪寲榛樿鍊稽br bdsfid="191"> var target = document.querySelector(鈥?value鈥?;
target.innerHTML = Math.abs(elem.value);

var rangeValue = function(){
var newValue = Math.abs(elem.value); //鎶婅幏鍙栧埌鐨勫€艰浆鍖栦负姝ｆ暣鏁帮紝
target.innerHTML = newValue;
}
//缁戝畾input鐩戝惉浜嬩欢

elem.addEventListener(鈥渋nput鈥? rangeValue);

鍘熺悊灏辨槸鎶婅礋鏁拌浆鍖栦负姝ｆ暟锛屽垯鏈€灏忓€煎彉涓烘渶澶у€硷紝鏈€澶у€煎弽涔嬶紝鍗冲彲瀹炵幇宸﹀皬鍙冲ぇ鐨勬晥鏋?

杞浇璇锋爣鏄庡嚭澶凓CSS瀹炵幇鑷畾涔夋粦鍔ㄦ潯(input)锛屽姩鎬佺洃鍚敼鍙樻暟鍊稽/a>

鏂囩珷鏉ユ簮: https://blog.csdn.net/qq_35121097/article/details/90746905