More than 5 years have passed since last update.

jQuery Ui slider

jQuery

Last updated at 2018-03-13Posted at 2016-02-02

サイトページにてスライダーを実装してみたので備忘録をしておく
2016/06/09 ソース変更

欲しかった機能

ブラウザやデバイス(タッチデバイスやPC)が違ってもなるべく同じ表示になること。
動作をタッチデバイスに対応できること。
スライダーとは別にプラススイッチやマイナススイッチを設けてバーを直接操作しなくてもバーの位置を変えられること。
スライドバーの位置によって自動的に色を変更すること　例:0ならグレー、1なら緑、50なら黄色、100なら赤色とグラデーションしていく
現在の値をバーの中に出す

使用したもの

jQuery　ベース
jQuery UI　これまたベース
jQuery UI Touch Punch　スマフォなどで操作をできるようにする
font-awesome アイコン

ソース

Head

 <head>
  <title>スライダー</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>

Body

<body>
    <div id="volume--plus">
        <i class="fa fa-volume-up fa-2x" aria-hidden="true"></i>
    </div>
    <div id="volume" class="bar"><label id="volumelabel"></label>
        <input type="hidden" id="volumevalue" value="70">
    </div>
    <div id="volume--minus">
        <i class="fa fa-volume-down fa-2x" aria-hidden="true"></i>
    </div>
</body>

Script

<script type="text/javascript">
    function handleColorChange(event, ui) {
        var now = ui.value;
        var color;
        $('.ui-slider-handle').css("box-shadow", "0px 0px");
        if (now <= 50) {
            color =(Math.floor((now) * (230 / 90)).toString(16)).slice(2 * -1);
            color = '#' + color + 'FF00';
            if (now === 0) {
                color = "#777777";
            }
        } else if (now > 50) {
            color =(Math.floor((100 - now) * (230 / (100 - 50))).toString(16)).slice(2 * -1);
            color = '#FF' + color + '00';
        }
        $('.ui-slider-handle').css('background', color);
    }
    $("#volume").slider({
        max: 100,
        min: 0,
        value: 50,
        step: 1,
        orientation: "vertical",
        slide: function (event, ui) {
            handleColorChange(event, ui);
            $('.ui-slider-handle').html('<label class="levelVolume">' + ui.value + '</label>');
        },
        change: function (event, ui) {
            $("#volumevalue").val(ui.value);
            nowTitle = 1;
            handleColorChange(event, ui);
            $('.ui-slider-handle').html('<label class="levelVolume">' + ui.value + '</label>');
            $('#volume .ui-slider-handle').css("box-shadow", "2px 2px");
        }
    });
    $("#volume--plus").click(function () {
        var vol = parseInt($("#volumevalue").val());
        vol = (vol + 1).toString();
        $("#volume").slider("value", vol);
    });
    $("#volume--minus").click(function () {
        var vol = parseInt($("#volumevalue").val());
        vol = (vol - 1).toString();
        $("#volume").slider("value", vol);
    });

    $(function () {
       $("#volume").slider("value", 50);
   });
</script>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up