JSなしのカスタムシェイプトラックで範囲入力を作成する方法

Question

多くの音量入力と同様に、三角形のトラックバーを持つ範囲入力を作成します。ここに例があります。

私は入力をスタイリングするには、この便利なガイドを読みましたが、それはトラックバーの形状を変更することについての情報を持っていません。

実際の入力を変更するJSでカスタム範囲スライダを使用したくない場合は、実際の範囲入力自体を使用します。それはまた、主にクロスブラウザでなければなりません。

どうすればこの問題を解決できますか？

Answer 1

トラックバー自体の形状をクロスブラウザ方式で確実に変更することはできませんが、トラックバーを非表示にして、要素または画像の背後に配置することができます。ここにこれが行われた例があります。

HTML

<input type="range" class="font-size-selector pd-select" id="font_size_selector" min="12" value="20" max="100" step="1"> 
<span class="triangle-range-background-slider"></span> 

CSSます。また、背景画像を削除し、それの場所でそこにこのロジックを置くことによって、代わりにCSSの形状を使用することができ

/* Trangle */ 
.triangle-range-background-slider { 
    position: relative; 
    display: block; 
    margin-top: -27px; 
    height: 20px; 
    background: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'); 
    background-size: 100% auto; 
    z-index: 1; 
} 

/* Input to work with triangle */ 
input[type=range] { 
    position: relative; 
    z-index: 3; 
} 

。

.triange-range-background-slider { 
    position: relative; 
    display: block; 
    margin-top: -27px; 
    border-top: 10px solid transparent; 
    border-right: 100px solid #3071a9; 
    border-bottom: 10px solid transparent; 
    z-index: 1; 
} 

その他の部分は、指定したCSS-TricksリンクのHide and Thumbです。

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

を隠す入力CSS

/* Hide */ 
    input[type=range] { 
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ 
    width: 100%; /* Specific width is required for Firefox. */ 
    background: transparent; /* Otherwise white in Chrome */ 
    } 

    input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    } 

    input[type=range]:focus { 
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */ 
    } 

    input[type=range]::-ms-track { 
    width: 100%; 
    cursor: pointer; 

    /* Hides the slider so custom styles can be added */ 
    background: transparent; 
    border-color: transparent; 
    color: transparent; 
    } 

親指入力CSS

/* Thumb */ 
    /* Special styling for WebKit/Blink */ 
    input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    // margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */ 
    } 

    /* All the same stuff for Firefox */ 
    input[type=range]::-moz-range-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    } 

    /* All the same stuff for IE */ 
    input[type=range]::-ms-thumb { 
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 
    border: 1px solid #000000; 
    height: 36px; 
    width: 16px; 
    border-radius: 3px; 
    background: #ffffff; 
    cursor: pointer; 
    }