Javascript 如何在单击按钮时重置jquery UI滑块范围值

我有一个Jquery UI滑块，单击重置按钮，我需要重置滑块值。在这里，我可以重置该值，但不能将背景颜色更改为初始位置。我已将slider函数用于脚本文件，并将css用于style.css，用于设置滑块和内容的样式。 我在这里使用了jQueryUI库，但没有得到解决方案

（函数（）{
//辅助函数
var更新\手柄\轨道\位置；
更新手柄轨迹位置=功能（滑块、ui手柄位置）{
变量句柄\轨迹\偏移、滑块\范围\反向\宽度；
handle\u track\u xoffset=-（（ui\u handle\u pos/100）*slider.clientWidth）；
$（滑块）.find（“.handle track”）.css（“左”，handle\u track\u xoffset）；
滑块范围逆宽度=（100-ui手柄位置）+“%”；
返回$（slider.find（“.slider range inverse”）.css（“width”，slider\u range\u inverse\u width）；
};
$（“.trybtn”）。单击（函数（）{
$（“#js slider”）.slider（“value”，$（this.val（））；
});
//初始滑块
$（“#js滑块”）.滑块({
射程：“分钟”，
最高：100，
价值：50，
创建：函数（事件、用户界面）{
var滑块；
滑块=$（event.target）；
//将滑块控制柄附加一个中心点及其自己的轨迹
slider.find（'.ui slider handle'）.append（''）；
//将滑块附加一个反向范围
滑块。前置（“”）；
//设置初始尺寸
slider.find（“.handle track”）.css（“宽度”，event.target.clientWidth）；
//设置轨道的初始位置
返回update\u handle\u track\u pos（event.target，$（this.slider）（“value”）；
},
幻灯片：功能（事件、用户界面）{
//更新轨道位置
返回更新\句柄\跟踪\位置（event.target，ui.value）；
}
});
}).打电话（这个）
.ui滑块，
.ui滑块。滑块范围反转，
.ui滑块.ui滑块范围{
高度：14px；
边界半径：10px；
边框宽度：0；
}
身体{
背景：#f0；
字体系列：Helvetica，Arial；
}
h1{
文本对齐：居中；
颜色：#444；
边缘顶部：50px；
}
#滑块容器{
宽度：80%；
高度：80px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
位置：相对位置；
最高：50%；
保证金：0自动；
文本对齐：居中；
背景：#FFF；
边界半径：5px；
填充：35px40px30px40px；
盒影：0 10px 30px rgba（0,0,0,0.2）；
}
.ui滑块{
背景色：#1ABC9C；
背景图像：-webkit线性渐变（左，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
背景图像：线性渐变（向右，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
}
.ui滑块*{
大纲：无；
}
.ui滑块。滑块范围反转{
背景：#CCC；
位置：绝对位置；
右：0；
}
.ui滑块.ui滑块范围{
背景：透明；
}
.ui滑块.ui滑块句柄{
宽度：28px；
高度：28px；
光标：指针；
盒影：0 3px 8px rgba（0,0,0,0.4）；
背景：#FFF；
顶部：-7px；
边界半径：50%；
边框宽度：0；
}
.ui滑块.ui滑块句柄：活动{
盒影：0 3px20px rgba（0,0,0,0.5）；
}
.ui滑块.ui滑块句柄.dot{
宽度：18px；
高度：18px；
边界半径：50%；
位置：绝对位置；
顶部：5px；
左：5px；
背景：透明；
溢出：隐藏；
}
.ui滑块.ui滑块句柄.dot.handle轨迹{
显示：块；
高度：18px；
背景色：#1ABC9C；
背景图像：-webkit线性渐变（左，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
背景图像：线性渐变（向右，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
位置：绝对位置；
右边填充：18px；
}

重置

（函数（）{
//辅助函数
var更新\手柄\轨道\位置；
更新手柄轨迹位置=功能（滑块、ui手柄位置）{
变量句柄\轨迹\偏移、滑块\范围\反向\宽度；
handle\u track\u xoffset=-（（ui\u handle\u pos/100）*slider.clientWidth）；
$（滑块）.find（“.handle track”）.css（“左”，handle\u track\u xoffset）；
滑块范围逆宽度=（100-ui手柄位置）+“%”；
返回$（slider.find（“.slider range inverse”）.css（“width”，slider\u range\u inverse\u width）；
};
$（“.trybtn”）。单击（函数（）{
$（“#js slider”）.slider（“value”，$（this.val（））；
$（'.slider range inverse'）.css（'width'，100-$（this.val（）+'%'）；
});
//初始滑块
$（“#js滑块”）.滑块({
射程：“分钟”，
最高：100，
价值：50，
创建：函数（事件、用户界面）{
var滑块；
滑块=$（event.target）；
//将滑块控制柄附加一个中心点及其自己的轨迹
slider.find（'.ui slider handle'）.append（''）；
//将滑块附加一个反向范围
滑块。前置（“”）；
//设置初始尺寸
slider.find（“.handle track”）.css（“宽度”，event.target.clientWidth）；
//设置轨道的初始位置
返回update\u handle\u track\u pos（event.target，$（this.slider）（“value”）；
},
幻灯片：功能（事件、用户界面）{
//更新轨道位置
返回更新\句柄\跟踪\位置（event.target，ui.value）；
}
});
}).打电话（这个）
.ui滑块，
.ui滑块。滑块范围反转，
.ui滑块.ui滑块范围{
高度：14px；
边界半径：10px；
边框宽度：0；
}
身体{
背景：#f0；
字体系列：Helvetica，Arial；
}
h1{
文本对齐：居中；
颜色：#444；
边缘顶部：50px；
}
#滑块容器{
宽度：80%；
高度：80px；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
位置：相对位置；
最高：50%；
保证金：0自动；
文本对齐：居中；
背景：#FFF；
边界半径：5px；
填充：35px40px30px40px；
盒影：0 10px 30px rgba（0,0,0,0.2）；
}
.ui滑块{
背景色：#1ABC9C；
背景图像：-webkit线性渐变（左，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
背景图像：线性渐变（向右，#1ABC9C 0%，#F1C40F 50%，#E74C3C 100%）；
}
.ui滑块*{
大纲：无；
}
.ui滑块。滑块范围反转{
背景：红色；
po
$(".trybtn").click(function() {
    $("#js-slider").slider("value", $(this).val());
    update_handle_track_pos($("#js-slider"), $(this).val());
  });