JavaScript为storyline添加滑块

创建滑块元素

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变量名