Slider使ってみる（jqueryUI）

jQuery 技術メモ

Form中の「xxxx年～yyyy年」という検索条件を、キーボードなしでも操作できるようにしたいという要望があったのでjqueryUIのSliderを利用してみた。

<html>
  <head>
    <meta charset="utf-8">
    <title>Slider</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script>
    $(function() {
      $( "#yearSlider" ).slider({
        range: true,
        min: 1900,
        max: 2100,
        values: [ 1950 , 2050 ],
        slide: function( event, ui ) {
          $( "#yearFrom" ).val(ui.values[ 0 ]);
          $( "#yearTo" ).val(ui.values[ 1 ]);
        }
      });
      $( "#yearFrom" ).change(function() {     
        $( "#yearSlider" ).slider( "values", [ this.value , $( "#yearTo" ).val() ] );
      });
      $( "#yearTo" ).change(function() {
        $( "#yearSlider" ).slider( "values", [ $( "#yearFrom" ).val() , this.value ] );
      });  
    });
    </script>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <input type="text" id="yearFrom" value="1950" style="width:50px"/>年 ～ 
            <input type="text" id="yearTo" value="2050" style="width:50px"/>年
          </td>
        </tr>
        <tr>
          <td>
            <div id="yearSlider" style="width:150px"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

結果こんな感じになった

便利！ かもしれない