要在Materialize中显示范围值,你可以使用range类来创建一个滑块。下面是一个示例代码:
HTML部分:
选择一个范围值:
当前范围值为:50
JavaScript部分:
document.addEventListener('DOMContentLoaded', function() {
var rangeInput = document.getElementById('rangeInput');
var rangeValue = document.getElementById('rangeValue');
rangeValue.textContent = rangeInput.value; // 初始化范围值
// 监听滑块值的变化
rangeInput.addEventListener('input', function() {
rangeValue.textContent = rangeInput.value;
});
});
在上面的示例中,我们使用了Materialize的CSS和JavaScript库来创建滑块。range类用于创建滑块,input事件用于监听滑块值的变化,并将其显示在页面上。
请确保在HTML中引入了Materialize的CSS和JavaScript库,以及在JavaScript中使用了DOMContentLoaded事件来确保在文档加载完成后再执行代码。
上一篇:保持在列表中的选择