久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H

  • <acronym id="1hxtt"><label id="1hxtt"></label></acronym>
    <pre id="1hxtt"></pre>
    <pre id="1hxtt"><ruby id="1hxtt"></ruby></pre>

    1. 技術頻道導航
      HTML/CSS
      .NET技術
      IIS技術
      PHP技術
      Js/JQuery
      Photoshop
      Fireworks
      服務器技術
      操作系統
      網站運營

      贊助商

      分類目錄

      贊助商

      最新文章

      搜索

      CSS+JS實現的顏色漸變可拖動滑塊

      作者:admin    時間:2022-9-12 10:42:35    瀏覽:

      本文介紹一個CSS+JS實現的顏色漸變可拖動滑塊。

      demodownload

      實現代碼

      HTML

      <form action="">
        <label for="gradient-range" class="sr">Range</label>
        <span class="gr-glow">
          <input id="gradient-range" class="gr-input" type="range" value="50" min="0" max="100">
        </span>
      </form>

      CSS

      * {
        border: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      :root {
        --hue: 223;
        --white: hsl(var(--hue),10%,100%);
        --gray1: hsl(var(--hue),10%,90%);
        --gray2: hsl(var(--hue),10%,80%);
        --gray7: hsl(var(--hue),10%,30%);
        --gray9: hsl(var(--hue),10%,10%);
        font-size: calc(16px + (48 - 16) * (100vw - 320px) / (1280 - 320));
      }

      body,
      input {
        font: 1em/1.5 sans-serif;
      }

      body {
        background-color: var(--gray9);
        color: var(--gray1);
        height: 100vh;
        display: grid;
        place-items: center;
      }

      /* Main styles */
      .gr-glow {
        --gradient: linear-gradient(90deg,hsl(3,90%,55%),hsl(63,90%,55%) 6em,hsl(123,90%,55%) 12em);
        --percent: 50%;
        display: flex;
        align-items: center;
        position: relative;
        margin: 0.5em 0;
        width: 12em;
        height: 1.5em;
      }

      .gr-glow:before {
        background-image: var(--gradient);
        border-radius: 0.5em;
        content: "";
        display: block;
        filter: blur(0.6em);
        position: absolute;
        top: 25%;
        left: 0;
        width: var(--percent);
        height: 50%;
        z-index: -1;
      }

      .gr-input {
        background: var(--gray7) var(--gradient) no-repeat;
        background-size: var(--percent) 100%;
        border-radius: 0.5em;
        width: inherit;
        height: 0.75em;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
      }

      .gr-input:focus {
        outline: transparent;
      }

      /* WebKit */
      .gr-input::-webkit-slider-thumb {
        background-color: var(--white);
        border: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0.0625em var(--gray2) inset;
        width: 1.5em;
        height: 1.5em;
        transition: background-color 0.15s linear;
        -webkit-appearance: none;
        appearance: none;
      }

      .gr-input:focus::-webkit-slider-thumb,
      .gr-input::-webkit-slider-thumb:hover {
        background-color: var(--gray1);
      }

      /* Firefox */
      .gr-input::-moz-range-thumb {
        background-color: var(--white);
        border: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0.0625em var(--gray2) inset;
        width: 1.5em;
        height: 1.5em;
        transition: background-color 0.15s linear;
      }

      .gr-input:focus::-moz-range-thumb,
      .gr-input::-moz-range-thumb:hover {
        background-color: var(--gray1);
      }

      /* Acccessibility */
      .sr {
        clip: rect(1px,1px,1px,1px);
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
      }

      /* `:focus-visible` support */
      @supports selector(:focus-visible) {
        .gr-input:focus::-webkit-slider-thumb {
          background-color: var(--white);
        }

        .gr-input:focus-visible::-webkit-slider-thumb,
      .gr-input::-webkit-slider-thumb:hover {
          background-color: var(--gray1);
        }

        .gr-input:focus::-moz-range-thumb {
          background-color: var(--white);
        }

        .gr-input:focus-visible::-moz-range-thumb,
      .gr-input::-moz-range-thumb:hover {
          background-color: var(--gray1);
        }
      }

      JavaSCript

      window.addEventListener("DOMContentLoaded", () =>
      {
        const grs = new GradientRangeSlider("#gradient-range");
      });
      class GradientRangeSlider
      {
        constructor(qs)
        {
          this.input = document.querySelector(qs);
          this.input ? .addEventListener("input", this.update.bind(this));
          this.update();
        }
        update(e)
        {
          let value = this.input.defaultValue;
          // when manually set
          if (e) value = e.target ? .value;
          // when initiated
          else this.input.value = value;
          const min = this.input.min || 0;
          const max = this.input.max || 100;
          const percentRaw = (value - min) / (max - min) * 100;
          const percent = +percentRaw.toFixed(2);
          const handle = 1.5 * (1 - percent / 100) - 1.125;
          const percentStyle = `calc(${percent}% + ${handle}em)`;
          this.input.parentElement ? .style.setProperty("--percent", percentStyle);
        }
      }

      相關文章

      標簽: css  slider  滑塊  可拖動滑塊  
      x
      • 站長推薦
      久久精品国产精品国产精品污,亚洲色成人四虎在线观看,亚洲熟妇无码另类久久久,揉她小豆豆揉到失禁H