如何在聚合物中创建圆形滑块

时间:2018-05-09 12:38:01

标签: javascript jquery html css polymer

需要支持此程序的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>

输出:

期待这样的输出:

Round Slider or Circular Slider or Radial Slider

0 个答案:

没有答案