LoginSignup
6
7

More than 5 years have passed since last update.

jQuery Ui slider

Last updated at Posted 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>
6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7