用途
新着
履歴
分類

CSS インプットスライダーの加工

CSS インプットスライダーの加工
スライドして入力するインターフェースのデザインやデータの取得するサンプルです。

HTMLのinputタグのtypeをrangeにすると、ブラウザのデフォルトのスライドUIが使えます。

ブラウザに依存するUIなので、そのまま使う方何かと安全ではありますが、デザインなどを変更したい場合があります。

その場合はCSSである程度加工が可能なので、まとめておきます。

HTML


<input  type="range" min="0" max="100" step="1" value="20">

そのまま表示すると以下のようになります。

少しCSSを当てると以下になります。

合わせて値の取得も実装します。

HTML

<div id="demo_val"></div>

<input class="demo_slider" type="range" min="0" max="100" step="1" value="20">

CSS


input[type=range].demo_slider:focus {
    outline: none;
}

input[type=range].demo_slider {
    width: 200px;
    margin: 5px 0;
    background-color: transparent;
    -webkit-appearance: none;
}

/* for Chorome,safari */

    /* slider line */
    input[type="range"].demo_slider::-webkit-slider-runnable-track {
        background: rgba(0, 0, 0, 0.78);
        border: 0.2px solid #010101;
        border-radius: 1.3px;
        width: 100%;
        height: 2px;
        cursor: pointer;
    }

    /* slider head */
    input[type="range"].demo_slider::-webkit-slider-thumb {
        margin-top: -7px;
        width: 15px;
        height: 15px;
        background: #FFF;
        border: 3px solid #F00;
        border-radius: 12px;
        cursor: pointer;
        -webkit-appearance: none;
    }

    /* slider line focus */
    input[type="range"].demo_slider:focus::-webkit-slider-runnable-track {
        background: #0a0a0a;
    }



/* for IE,Edge */
    /* slider line */
    input[type="range"].demo_slider::-ms-track {
        background: transparent;
        border-color: transparent;
        border-width: 5.9px 0;
        color: transparent;
        width: 100%;
        height: 2px;
        cursor: pointer;
    }

    input[type="range"].demo_slider::-ms-fill-lower {
        background: #000000;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
    }

    input[type="range"].demo_slider::-ms-fill-upper {
        background: rgba(0, 0, 0, 0.78);
        border: 0.2px solid #010101;
        border-radius: 2.6px;
    }

    /* slider head */
    input[type="range"].demo_slider::-ms-thumb {
        width: 15px;
        height: 15px;
        background: #000000;
        border: 3px solid #F00;
        border-radius: 12px;
        cursor: pointer;
        margin-top: 0px;
    }

    /* slider line focus */
    input[type="range"].demo_slider:focus::-ms-fill-lower {
        background: #0a0a0a;
    }

    input[type="range"].demo_slider:focus::-ms-fill-upper {
        background: #0a0a0a;
    }



    #demo_val{
        margin: 20px;
    }

JS


$(document).ready(function(){
    val = $('.demo_slider').val();
    $('#demo_val').html(val);
});

$('.demo_slider').on('change', function() {
    val = $(this).val();
    $('#demo_val').html(val);
});
公開 2021-02-23 17:34:49
更新 2021-02-23 17:46:14
このページの二次元コード
CSS インプットスライダーの加工

人気のサンプル

search -  category -  about
© 2024 kipure
Top