创建滑块元素
mydiv=$('<input type="range" style="width:100%" id="myRange" min="0" max="1" step="0.01" value="1">');//创建元素
(min设置最小值,max设置最大值,step设置步长,value设置初始值)
$('#hdt').append(mydiv);
//监听滑块更新函数
$('#myRange').on('input', function() {
var player = GetPlayer();
player.SetVar("滑块1",$(this).val());
$(myhuakuai).css( 'background', 'linear-gradient(to right, #ff0000, #d3d3d3 ' + this.value/this.max*100 + '%, #d3d3d3)' );
});
}
滑块样式
/* 设置整个滑块轨道的样式 */
input[type="range"] {
width: 100%;
background-color: #d3d3d3; /* 设置背景颜色 */
outline: none;
border-radius: 10px; /* 滑块圆角 */
-webkit-appearance: none; /* 移除默认样式 */
margin: 20px 0;
cursor: pointer; /* 设置鼠标样式为指针 */
height: 50%;
}
/* 设置滑块的形状和颜色 */
input[type="range"]::-webkit-slider-thumb {
width: 8%; /* 设置宽度 */
height: 0;
padding-bottom: 8%;
background-color: #1e90ff; /* 设置背景颜色 */
border-radius: 50%; /* 圆形 */
cursor: pointer; /* 设置鼠标样式为指针 */
-webkit-appearance: none; /* 移除默认样式 */
}
设置滑块的值
$('#myRange').val(1);
写成函数
function huakuai(name,id,min,max,value,step,slvar){
mydiv=$('<input type="range" style="width:100%" id="'+id+'" min="'+min+'" max="'+max+'" value="'+value+'" step="'+step+'">');//创建元素
(id设置元素的id,min设置最小值,max设置最大值,value设置初始值,step设置步长)
var myhuakuai="#"+id;
$(myhuakuai).remove();
$("#"+name+" div").append(mydiv);
$(myhuakuai).on('input', function() {
var player = GetPlayer();
player.SetVar(slvar,$(this).val());
$(myhuakuai).css( 'background', 'linear-gradient(to right, #ff0000, #d3d3d3 ' + this.value/this.max*100 + '%, #d3d3d3)' );
});
}
调用示例
huakuai("hk1_img","hk1",0,1,1,0.01,"滑块1")//参数:元素名称,滑块id,最小值 ,最大值,初始值,步长,sl变量名