input range & color picker All In One

input range & color picker All In One

demo

Tagify

https://yaireo.github.io/tagify/

.color-picker .range {
    --tickEvery: 400;
    --primaryColor: #000;
    --progress-color: transparent;
    --progress-shadow: unset;
    --value-active-color: white;
    --value-background: white;
    --value-font: 700 12px/1 Arial;
    --fill-color: var(--primaryColor);
    --thumb-size: 21px;
    --track-height: calc(var(--thumb-size)/1.5);
    --thumb-shadow: 0 0 3px rgba(0,0,0,.2);
    --step: 1;
    --completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);
    --show-min-max: none;
    --LTR: 1;
    display: inline-block;
    height: max(var(--track-height), var(--thumb-size));
    background: none;
    position: relative;
    z-index: 1;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0 0 calc((var(--thumb-size) - var(--track-height)) * -1);
}
style attribute {
    --hue: 161;
    --saturation: 0;
    --lightness: 7;
    --alpha: 26;
    --pos-left: 985;
    --pos-top: 368;
    --pos-target-width: 320;
    --pos-target-height: 195;
    --pos-ref-width: 200;
    --pos-ref-height: 14;
    --pos-ref-left: 188;
    --pos-ref-top: 354;
    --window-scroll-y: 0;
    --window-scroll-x: 0;
}
.color-picker[positioned] {
    --x: calc(var(--pos-left) + var(--window-scroll-x));
    --y: calc(var(--pos-top) + var(--window-scroll-y));
    position: absolute;
    z-index: 9999991;
    border-radius: 10px;
    padding: 0.5em;
    box-shadow: 0 5px 20px #00000044;
    backdrop-filter: blur(3px);
    background: #fff;
    top: 0;
    left: 0;
    transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));
}
.color-picker {
    --hue: 150;
    --saturation: 100;
    --lightness: 50;
    --alpha: 100;
    --s: calc(var(--saturation) * 1%);
    --l: calc(var(--lightness) * 1%);
    --a: calc(var(--alpha) * 1%);
    --color: hsla(var(--hue), var(--s), var(--l), var(--a));
    --checkboard-color: #DDD;
    --checkboard-base-gradient: repeating-conic-gradient(var(--checkboard-color) 0% 25%, transparent 0% 50%);
    --width: 320;
    --width-units: 1px;
    display: flex;
    flex-flow: column;
    gap: 0.5em;
    width: calc(var(--width) * var(--width-units));
    position: relative;
    box-sizing: border-box;
    transition: opacity .15s;
    transition-timing-function: ease-out;
}
body {
    font: 14px Arial;
    margin: 0;
    overflow-x: hidden;
}
:root {
    --tagify-dd-color-primary: rgb(53,149,246);
    --tagify-dd-bg-color: white;
}
.color-picker .range__progress::after {
    content: unset;
}


.color-picker .range__progress {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) translateZ(0);
    width: 100%;
    height: calc(var(--track-height));
    pointer-events: none;
    z-index: -1;
    box-shadow: var(--progress-shadow);
    border-radius: 20px;
    background: var(--fill-color, white);
}

/* inherited style */ {
    --min: 0;
    --max: 360;
    --value: 161;
    --text-value: "161";
}

.color-picker__hue.range {
    grid-area: hue;
    --fill-color: linear-gradient(to right, red 0%, #ff0 16.6%, lime 33.3%, cyan 50%, blue 66.6%, #f0f 83.3%, red 100%);
}

.color-picker .range {
    --tickEvery: 400;
    --primaryColor: #000;
    --progress-color: transparent;
    --progress-shadow: unset;
    --value-active-color: white;
    --value-background: white;
    --value-font: 700 12px/1 Arial;
    --fill-color: var(--primaryColor);
    --thumb-size: 21px;
    --track-height: calc(var(--thumb-size)/1.5);
    --thumb-shadow: 0 0 3px rgba(0,0,0,.2);
    --step: 1;
    --completed: calc((var(--value) - var(--min) ) / (var(--max) - var(--min)) * 100);
    --show-min-max: none;
    --LTR: 1;
    display: inline-block;
    height: max(var(--track-height), var(--thumb-size));
    background: none;
    position: relative;
    z-index: 1;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0 0 calc((var(--thumb-size) - var(--track-height)) * -1);
}

<div class="range color-picker__hue" title="hue" style="--min:0; --max:360; --value:161; --text-value:&quot;161&quot;;">
    <input type="range" name="hue" value="undefined" min="0" max="360">
    <output></output>
    <div class="range__progress"></div>
</div>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---