SHARE
TWEET

Untitled

a guest Sep 17th, 2019 97 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.    
  9.     <div class="star-rating-container">
  10.         <!-- 星の表示 -->
  11.         <div class="star-rating">
  12.           <div class="star-rating-top" style="width: 70%" id="starRatingRaito"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  13.           <div class="star-rating-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  14.         </div>
  15.         <!-- スライダー -->
  16.         <div>
  17.           <input type="range" class="star-rating-slider" id="starRatingSlider" min="0" max="50" step="5">
  18.         </div>
  19.     </div>
  20.  
  21.     <script>
  22.         function setValue(ev) {
  23.             var value = ev.target.value;
  24.             console.log('change:', value);
  25.             document.getElementById('starRatingRaito').style.width = (value * 2) + '%';        
  26.         }
  27.         document.getElementById('starRatingSlider').addEventListener('input', setValue);
  28.         document.getElementById('starRatingSlider').addEventListener('change', setValue);
  29.         document.getElementById('starRatingSlider').addEventListener('click', setValue);
  30.     </script>
  31.      
  32.     <style>
  33.         .star-rating-container {
  34.             position: relative;
  35.             display: inline-block;
  36.             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  37.         }
  38.         .star-rating-container * {
  39.             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);         
  40.         }
  41.         /**
  42.             スライダー.
  43.         */
  44.         .star-rating-slider {
  45.             position: absolute;
  46.             top: 0;
  47.             left: 0;
  48.             z-index: 2;
  49.             width: 100%;
  50.             height: 100%;
  51.             opacity: 0.01;
  52.         }
  53.         input[type="range"]::-webkit-slider-thumb {
  54.             width: 35px;
  55.             height: 35px;
  56.         }
  57.         /**
  58.         *   星の表示.
  59.         */
  60.         .star-rating {
  61.             display: inline-block;
  62.           color: #999999;
  63.           font-size: 50px;
  64.           margin: 0 auto;
  65.           position: relative;
  66.           padding: 0;
  67.           text-shadow: 0px 1px 0 #a2a2a2;
  68.           pointer-events: none;
  69.         }
  70.         .star-rating span {
  71.             padding: 0 0.1em;
  72.         }
  73.         .star-rating-top {
  74.           color: #4fc2cd;
  75.           padding: 0;
  76.           position: absolute;
  77.           z-index: 1;
  78.           display: block;
  79.           top: 0;
  80.           left: 0;
  81.           overflow: hidden;
  82.         }
  83.         .star-rating-bottom {
  84.           padding: 0;
  85.           display: block;
  86.           z-index: 0;
  87.         }
  88.         body {
  89.           margin: 50px;
  90.           text-align: center;
  91.           font-family: 'Open Sans', sans-serif;
  92.           background: #f5f5f5;
  93.         }
  94.     </style>
  95.  
  96.  
  97. </body>
  98. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top