我用的是bootstrap 5 range我有点问题
1.为什么点显示在线的中心?我添加了最小值1
1.如何在输入字段中显示范围的值?
1.如何改变线条的背景色或线性渐变?
.customRange {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: transparent;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.customRange:hover {
opacity: 1;
}
.customRange::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.customRange::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="w-50 mx-auto">
<div class="d-flex justify-content-between"><label>Range</label>
<div><input type="text" name="" value="">%</div>
</div>
<input type="range" class="form-range customRange" min="1" max="100" oninput="this.nextElementSibling.value = this.value">
<div class="d-flex justify-content-between">
<span>1</span>
<span>100</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
2条答案
按热度按时间06odsfpq1#
您需要使用
value="1"
在1
初始化您的拇指。然后,在范围输入上写入更改事件,并使用$(this).val()
将值分配给其他输入。我不确定第三个问题,因为在那个文档中写的是supports "filling" their track.., we do not currently support it...
。演示代码:
jhkqcmku2#