精品！3D版本的范围滑块选择器

Scalable 3D Range Sliders

h5, widget, slider

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2225
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//from https://zephyo.github.io/

function initInputs() {
    var allInputs = document.body.querySelectorAll(".bar-input");

for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];
        var barId = input.parentNode.id;
        var styleEl = document.head.appendChild(document.createElement("style"));

if (i == allInputs.length - 1) {
            //set indicator
            var indicator = input.parentNode.querySelector('.bar .indicator');
            setBarIndicator(barId, input, styleEl, indicator);
            input.oninput = setBarIndicator.bind(this, barId, input, styleEl, indicator);
            input.onchange = setBarIndicator.bind(this, barId, input, styleEl, indicator);
        } else {
            setBar(barId, input, styleEl);
            input.oninput = setBar.bind(this, barId, input, styleEl);
            input.onchange = setBar.bind(this, barId, input, styleEl);
        }
    }
}

function setBar(barId, input, styleEl) {
    styleEl.innerHTML =
        "#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";
}

function setBarIndicator(barId, input, styleEl, indicatorEl) {
    styleEl.innerHTML =
        "#" + barId + " .bar-face.percentage:before {width:" + input.value + "%;}";
    indicatorEl.style.marginLeft = (input.value - 10) + '%';
    indicatorEl.textContent = input.value + '%';
}

initInputs();

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Nunito:400,900");
* {
    box-sizing: border-box;
}
body,
html {
    font-family: "Nunito", sans-serif;
    background: linear-gradient(0deg, #EEEFED, #F9E3E9);
    margin: 0;
    padding: 0;
    color: #4D5075;
    font-weight: 300;
    width: 100%;
    height: 100%;
    margin: 0;
}
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7vh 15vw 0vh 15vw;
}
h1 {
    text-align: center;
    margin: 0 0 10vh 0;
    font-size: 7vh;
    font-weight: 500;
    text-shadow: 0px -15px 70px rgba(77, 80, 117, 0.6);
}
h1 b {
    font-weight: 900;
}
p {
    text-align: center;
    font-size: 1.3rem;
    text-shadow: 10px 5px 25px rgba(77, 80, 117, 0.6);
    margin-bottom: 8vh;
}
.third-bar-p {
    margin-top: 7vh;
}
.perspective {
    -webkit-perspective: 70vh;
    perspective: 70vh;
    text-align: center;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    position: relative;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.perspective:hover {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}
.bar-input {
    position: absolute;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
}
#first-bar .bar-input {
    width: 55vh;
}
#second-bar .bar-input {
    width: 40vh;
}
#third-bar .bar-input {
    width: 42vh;
}
.bar {
    display: inline-block;
    position: relative;
    -webkit-transform: rotateX(55deg);
    transform: rotateX(55deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.bar .bar-face {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.bar .bar-face.front {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
.bar .bar-face.percentage:before {
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0;
}
#first-bar .bar {
    width: 55vh;
    height: 7vh;
}
#first-bar .bar .bar-face {
    background: rgba(255, 255, 255, 0.5);
}
#first-bar .bar .bar-face.floor {
    box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#first-bar .bar .bar-face.percentage:before {
    box-shadow: 0 1.6em 7em -0.3em rgba(149, 65, 105, 0.5);
}
#first-bar .bar .bar-face.roof {
    -webkit-transform: translateZ(7vh);
    transform: translateZ(7vh);
}
#first-bar .bar .bar-face.back {
    -webkit-transform: rotateX(-90deg) translateZ(-7vh);
    transform: rotateX(-90deg) translateZ(-7vh);
}
#first-bar .bar .bar-face.percentage:before {
    background-color: rgba(149, 65, 105, 0.6);
}
#second-bar .bar {
    width: 40vh;
    height: 10vh;
}
#second-bar .bar .bar-face {
    background: rgba(60, 75, 132, 0.5);
    background-image: linear-gradient(90deg, rgba(134, 114, 146, 0.5), rgba(60, 75, 132, 0.1)), url("/uploads/1907/stars.svg"), url("/uploads/1907/stars2.svg");
    background-repeat: repeat repeat;
}
#second-bar .bar .bar-face.floor {
    box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#second-bar .bar .bar-face.percentage:before {
    box-shadow: 0 1.6em 7em -0.3em rgba(200, 212, 250, 0.5);
}
#second-bar .bar .bar-face.roof {
    -webkit-transform: translateZ(10vh);
    transform: translateZ(10vh);
}
#second-bar .bar .bar-face.back {
    -webkit-transform: rotateX(-90deg) translateZ(-10vh);
    transform: rotateX(-90deg) translateZ(-10vh);
}
#second-bar .bar .bar-face.percentage:before {
    background-image: url("/uploads/1907/sky.png");
    opacity: 0.9;
}
#third-bar .bar {
    width: 42vh;
    height: 8vh;
}
#third-bar .bar .bar-face {
    background: rgba(232, 154, 173, 0.7);
}
#third-bar .bar .bar-face.floor {
    box-shadow: 0 1.3em 1.2em -0.4em rgba(0, 0, 70, 0.25), 0 -2em 15em 0.5em #4d5075, 0 -0.75em 25em 10em rgba(255, 255, 255, 0.4);
}
#third-bar .bar .bar-face.percentage:before {
    box-shadow: 0 1.6em 7em -0.3em rgba(236, 0, 113, 0.5);
}
#third-bar .bar .bar-face.roof {
    -webkit-transform: translateZ(8vh);
    transform: translateZ(8vh);
}
#third-bar .bar .bar-face.back {
    -webkit-transform: rotateX(-90deg) translateZ(-8vh);
    transform: rotateX(-90deg) translateZ(-8vh);
}
#third-bar .bar .bar-face.percentage:before {
    background: linear-gradient(90deg, rgba(245, 239, 200, 0.5), #ec0071);
}
#third-bar .bar .indicator {
    box-shadow: 0px 15px 35px rgba(236, 0, 113, 0.3);
    background: #ec0071;
    width: 8vh;
    height: 8vh;
    color: white;
    -webkit-transform: translateY(9.6vh);
    transform: translateY(9.6vh);
    text-align: center;
    font-size: 2.5vh;
    font-weight: 900;
    line-height: 8vh;
}
#third-bar .bar .indicator:before {
    content: "";
    position: absolute;
    background: #ec0071;
    left: 0;
    right: 0;
    margin: auto;
    top: -6px;
    width: 4vh;
    height: 4vh;
    z-index: -1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

HTML

<h1>可扩展<b>3D</b>滑块范围选择器</h1>

<main class="perspective" id="first-bar">
    <section class="bar">
        <div class="bar-face back percentage"></div>
        <div class="bar-face floor percentage"></div>
        <div class="bar-face roof percentage"></div>
        <div class="bar-face front percentage"></div>
    </section>
    <input class="bar-input" type="range" min="0" max="101" value="64" />
</main>
<p>简单3D范围选择器</p>

<main class="perspective" id="second-bar">
    <section class="bar">
        <div class="bar-face back percentage"></div>
        <div class="bar-face floor percentage"></div>
        <div class="bar-face roof percentage"></div>
        <div class="bar-face front percentage"></div>
    </section>
    <input class="bar-input" type="range" min="0" max="101" value="37" />
</main>
<p>带模式图的范围选择器</p>

<main class="perspective" id="third-bar">
    <section class="bar">
        <div class="bar-face back percentage"></div>
        <div class="bar-face floor percentage"></div>
        <div class="bar-face roof percentage"></div>
        <div class="bar-face front percentage"></div>
        <div class="indicator">89%</div>
    </section>
    <input class="bar-input" type="range" min="0" max="100" value="89" />
</main>
<p class="third-bar-p">带指示条的渐变范围选择器</p>

Scalable 3D Range Sliders

h5, widget, slider

编辑器支持Emmet

快捷键

Scalable 3D Range Sliders

h5, widget, slider

一款带颜色变化和圆形浮标的范围选择器

6款实用的VueJS滑块选择器组件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：