圆弧形状的滑块控制器

Circular sliders with a single input[type='range']

slider，圆

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1041
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* INPUT[type='range'] Shadow Elements Selectors *
 * ============================================= */

html {
    height: 100%;
    padding: 0;
}
body {
    margin: 0;
    color: #5a5a5a;
    font-family: 'Varela Round', sans-serif;
    height: 100%;
    background-color: white;
    background-image: linear-gradient(#5a6ec8, white, #5a6ec8);
    background-repeat: no-repeat;
    backgorund-size: 50% 100%;
    background-position: 50% 50%;
}
h1 {
    text-align: center;
    white-space: nowrap;
    margin: 0 25%;
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50%;
    text-align: center;
    transform: translateY(-50%);
}
h1 span {
    display: flex;
    height: 3em;
    justify-content: center;
    align-items: center;
    vertical-align: top;
}
h1 span > * {
    flex-shrink: 0;
}
h1 span:first-child > input {
    margin-left: .5em;
}
h1 span:last-child > input {
    margin-right: .5em;
}
input[type='range'][orient='circular'] {
    overflow: hidden;
    height: 3em;
    width: 3em;
    line-height: 3em;
    display: inline-block;
    background-color: currentColor;
    transform-origin: 50% 50%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.09em currentColor;
    box-sizing: border-box;
    transform-origin: 50% 50%;
    transform: rotate(-45deg);
}
input[type='range'][orient='circular'],
input[type='range'][orient='circular']::before,
input[type='range'][orient='circular']::after,
input[type='range'][orient='circular'] /deep/ *,
input[type='range'][orient='circular'] /deep/ *::before,
input[type='range'][orient='circular'] /deep/ *::after {
    box-sizing: border-box;
}
input[type='range'][orient='circular']:not(*:root) {
    font-size: 1em;
}
@supports (-moz-appearance: meterbar) {
    input[type='range'][orient='circular'] {
        font-size: 1em;
    }
}
_:-ms-input-placeholder,
:root input[type='range'][orient='circular'] {
    font-size: 1em;
}
input[type='range'][orient='circular']:not(*:root) {
    -webkit-appearance: none;
}
input[type='range'][orient='circular']:not(*:root):focus {
    outline: none;
}
input[type='range'][orient='circular']::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    position: relative;
    z-index: 1;
}
input[type='range'][orient='circular']::-webkit-slider-runnable-track::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    z-index: -1;
}
input[type='range'][orient='circular']::-webkit-slider-thumb {
    -webkit-appearance: none;
    position: relative;
    z-index: -1;
}
input[type='range'][orient='circular']::-webkit-slider-thumb::before {
    content: "";
    transform: translateX(-100%);
    display: block;
    z-index: -1;
}
input[type='range'][orient='circular']::-moz-range-track {
    z-index: -1;
}
input[type='range'][orient='circular']::-ms-track {
    border: none;
    color: transparent;
}
input[type='range'][orient='circular']::-ms-fill-lower {
    background: transparent;
}
input[type='range'][orient='circular']:hover,
input[type='range'][orient='circular']:active,
input[type='range'][orient='circular']:focus:hover,
input[type='range'][orient='circular']:focus:active {
    box-shadow: 0 0 0 0.09em white, 0 0 0 0.3em currentColor, inset 0 0 0 0.09em currentColor;
}
input[type='range'][orient='circular']:focus {
    box-shadow: 0 0 0 0.09em white, 0 0 0 0.18em currentColor, inset 0 0 0 0.09em currentColor;
}
input[type='range'][orient='circular'][value='0'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(-22.5deg, white 50%, transparent 50%), linear-gradient(22.5deg, transparent 50%, white 50%), linear-gradient(-90deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #c8283c;
}
input[type='range'][orient='circular'][value='0']::-webkit-slider-runnable-track {
    background-position: 0 0em;
}
input[type='range'][orient='circular'][value='0']::-moz-range-track {
    background-position: 0 0em;
}
input[type='range'][orient='circular'][value='0']::-ms-track {
    background-position: 0 0em;
}
input[type='range'][orient='circular'][value='1'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(112.5deg, transparent 50%, white 50%), linear-gradient(0deg, white 50%, transparent 50%), linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(-67.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #c0303c;
}
input[type='range'][orient='circular'][value='1']::-webkit-slider-runnable-track {
    background-position: 0 -3em;
}
input[type='range'][orient='circular'][value='1']::-moz-range-track {
    background-position: 0 -3em;
}
input[type='range'][orient='circular'][value='1']::-ms-track {
    background-position: 0 -3em;
}
input[type='range'][orient='circular'][value='2'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(22.5deg, white 50%, transparent 50%), linear-gradient(67.5deg, transparent 50%, white 50%), linear-gradient(-45deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #b8383c;
}
input[type='range'][orient='circular'][value='2']::-webkit-slider-runnable-track {
    background-position: 0 -6em;
}
input[type='range'][orient='circular'][value='2']::-moz-range-track {
    background-position: 0 -6em;
}
input[type='range'][orient='circular'][value='2']::-ms-track {
    background-position: 0 -6em;
}
input[type='range'][orient='circular'][value='3'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(157.5deg, transparent 50%, white 50%), linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(-22.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #b0403c;
}
input[type='range'][orient='circular'][value='3']::-webkit-slider-runnable-track {
    background-position: 0 -9em;
}
input[type='range'][orient='circular'][value='3']::-moz-range-track {
    background-position: 0 -9em;
}
input[type='range'][orient='circular'][value='3']::-ms-track {
    background-position: 0 -9em;
}
input[type='range'][orient='circular'][value='4'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(67.5deg, white 50%, transparent 50%), linear-gradient(112.5deg, transparent 50%, white 50%), linear-gradient(0deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #a8483c;
}
input[type='range'][orient='circular'][value='4']::-webkit-slider-runnable-track {
    background-position: 0 -12em;
}
input[type='range'][orient='circular'][value='4']::-moz-range-track {
    background-position: 0 -12em;
}
input[type='range'][orient='circular'][value='4']::-ms-track {
    background-position: 0 -12em;
}
input[type='range'][orient='circular'][value='5'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(202.5deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), linear-gradient(22.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #a0503c;
}
input[type='range'][orient='circular'][value='5']::-webkit-slider-runnable-track {
    background-position: 0 -15em;
}
input[type='range'][orient='circular'][value='5']::-moz-range-track {
    background-position: 0 -15em;
}
input[type='range'][orient='circular'][value='5']::-ms-track {
    background-position: 0 -15em;
}
input[type='range'][orient='circular'][value='6'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(225deg, transparent 50%, white 50%), linear-gradient(112.5deg, white 50%, transparent 50%), linear-gradient(157.5deg, transparent 50%, white 50%), linear-gradient(45deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #98583c;
}
input[type='range'][orient='circular'][value='6']::-webkit-slider-runnable-track {
    background-position: 0 -18em;
}
input[type='range'][orient='circular'][value='6']::-moz-range-track {
    background-position: 0 -18em;
}
input[type='range'][orient='circular'][value='6']::-ms-track {
    background-position: 0 -18em;
}
input[type='range'][orient='circular'][value='7'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(247.5deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(67.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #90603c;
}
input[type='range'][orient='circular'][value='7']::-webkit-slider-runnable-track {
    background-position: 0 -21em;
}
input[type='range'][orient='circular'][value='7']::-moz-range-track {
    background-position: 0 -21em;
}
input[type='range'][orient='circular'][value='7']::-ms-track {
    background-position: 0 -21em;
}
input[type='range'][orient='circular'][value='8'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(270deg, transparent 50%, white 50%), linear-gradient(157.5deg, white 50%, transparent 50%), linear-gradient(202.5deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #88683c;
}
input[type='range'][orient='circular'][value='8']::-webkit-slider-runnable-track {
    background-position: 0 -24em;
}
input[type='range'][orient='circular'][value='8']::-moz-range-track {
    background-position: 0 -24em;
}
input[type='range'][orient='circular'][value='8']::-ms-track {
    background-position: 0 -24em;
}
input[type='range'][orient='circular'][value='9'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(292.5deg, transparent 50%, white 50%), linear-gradient(180deg, white 50%, transparent 50%), linear-gradient(225deg, transparent 50%, white 50%), linear-gradient(112.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #80703c;
}
input[type='range'][orient='circular'][value='9']::-webkit-slider-runnable-track {
    background-position: 0 -27em;
}
input[type='range'][orient='circular'][value='9']::-moz-range-track {
    background-position: 0 -27em;
}
input[type='range'][orient='circular'][value='9']::-ms-track {
    background-position: 0 -27em;
}
input[type='range'][orient='circular'][value='10'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(315deg, transparent 50%, white 50%), linear-gradient(202.5deg, white 50%, transparent 50%), linear-gradient(247.5deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #78783c;
}
input[type='range'][orient='circular'][value='10']::-webkit-slider-runnable-track {
    background-position: 0 -30em;
}
input[type='range'][orient='circular'][value='10']::-moz-range-track {
    background-position: 0 -30em;
}
input[type='range'][orient='circular'][value='10']::-ms-track {
    background-position: 0 -30em;
}
input[type='range'][orient='circular'][value='11'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(337.5deg, transparent 50%, white 50%), linear-gradient(225deg, white 50%, transparent 50%), linear-gradient(270deg, transparent 50%, white 50%), linear-gradient(157.5deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #70803c;
}
input[type='range'][orient='circular'][value='11']::-webkit-slider-runnable-track {
    background-position: 0 -33em;
}
input[type='range'][orient='circular'][value='11']::-moz-range-track {
    background-position: 0 -33em;
}
input[type='range'][orient='circular'][value='11']::-ms-track {
    background-position: 0 -33em;
}
input[type='range'][orient='circular'][value='12'] {
    background-image: radial-gradient(currentColor 33%, rgba(0, 0, 0, 0) 34%), linear-gradient(360deg, transparent 50%, white 50%), linear-gradient(247.5deg, white 50%, transparent 50%), linear-gradient(292.5deg, transparent 50%, white 50%), linear-gradient(180deg, white 50%, transparent 50%), radial-gradient(#ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 64%, #ffffff 65%);
    color: #68883c;
}
input[type='range'][orient='circular'][value='12']::-webkit-slider-runnable-track {
    background-position: 0 -36em;
}
input[type='range'][orient='circular'][value='12']::-moz-range-track {
    background-position: 0 -36em;
}
input[type='range'][orient='circular'][value='12']::-ms-track {
    background-position: 0 -36em;
}
input[type='range'][orient='circular']::-webkit-slider-runnable-track {
    border-radius: 50%;
    box-sizing: border-box;
    background-color: transparent;
    background-clip: border-box;
    background-size: 3em 39em;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/48051/12-rotated-numbers.png");
    height: 3em;
    width: 3em;
}
input[type='range'][orient='circular']::-moz-range-track {
    border-radius: 50%;
    box-sizing: border-box;
    background-color: transparent;
    background-clip: border-box;
    background-size: 3em 39em;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/48051/12-rotated-numbers.png");
    height: 3em;
    width: 3em;
}
input[type='range'][orient='circular']::-ms-track {
    border-radius: 50%;
    box-sizing: border-box;
    background-color: transparent;
    background-clip: border-box;
    background-size: 3em 39em;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/48051/12-rotated-numbers.png");
    height: 3em;
    width: 3em;
}
input[type='range'][orient='circular']::-webkit-slider-thumb {
    border: 0;
    height: 1em;
    width: 1em;
    background: transparent;
}
input[type='range'][orient='circular']::-moz-range-thumb {
    border: 0;
    height: 1em;
    width: 1em;
    background: transparent;
}
input[type='range'][orient='circular']::-ms-thumb {
    border: 0;
    height: 1em;
    width: 1em;
    background: transparent;
}
input[type='range'][orient='circular']::-ms-tooltip {
    display: none;
}

HTML

Circular sliders with a single input[type='range']

slider，圆

编辑器支持Emmet

快捷键

Circular sliders with a single input[type='range']

slider，圆

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：