WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

jQuery UI Slider

f:id:mmmmofu:20170507100448p:plain

公式サイト
jqueryui.com

デモ
http://efu.sakura.ne.jp/web/slider/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Slider</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
  <link rel="stylesheet" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="slider01"></div>
  <div class="value01"></div>
  <div class="slider02"></div>
  <div class="value02"></div>
</body>
</html>
*:focus {
  outline: none;
}

.slider01 {
  width: 500px;
  margin: 50px auto 30px;
}
.value01, .value02 {
  margin-bottom: 50px;
  text-align: center;
}
.slider02 {
  height: 500px;
  margin: 0 auto 30px;
}
$(function(){
  $('.slider01').slider({
    slide: function( event, ui ) {
      $(".value01").html("value:"+ui.value);
    },
    create: function( event, ui ) {
     $(".value01").html("value:"+$(this).slider( "value" ));
   }
 });
  $('.slider02').slider({
    orientation: "vertical",
    slide: function( event, ui ) {
      $(".value02").html("value:"+ui.value);
    },
    create: function( event, ui ) {
     $(".value02").html("value:"+$(this).slider( "value" ));
   }
 });
});