需要支持此程序的Web组件才能在google聚合物中创建一个圆形滑块,中间有可编辑的输入字段。
我如何更改代码以获取圆形滑块
<!DOCTYPE HTML>
<html>
<head>
<style>
#slider {
border-radius: 1000px;
box-shadow: 0px 0px 10px 0px rgb(123, 123, 123);
}
.rs-border {
border-width: 0px;
}
.rs-handle {
box-shadow: 0px 0px 16px 0px rgb(177, 177, 177);
margin-left: 16px !important;
background-color: rgb(252, 252, 252);
}
.rs-tooltip-text {
font-size: 34px;
color: gray;
}
span.rs-seperator.rs-border {
height: 8px !important;
width: 8px !important;
background: #aeaeae;
border-radius: 1000px;
margin-left: 2px;
margin-top: -4px !important;
}
</style>
</head>
<body>
<h2>roundSlider</h2>
<div id="slider"></div>
<script>
$("#slider").roundSlider({
radius: 120,
width: 14,
value: 50,
handleSize: 35,
startAngle: "315",
endAngle: "+270"
});
</script>
</body>
</html>
输出:
期待这样的输出: