Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <div class="star-rating-container">
- <!-- 星の表示 -->
- <div class="star-rating">
- <div class="star-rating-top" style="width: 70%" id="starRatingRaito"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
- <div class="star-rating-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
- </div>
- <!-- スライダー -->
- <div>
- <input type="range" class="star-rating-slider" id="starRatingSlider" min="0" max="50" step="5">
- </div>
- </div>
- <script>
- function setValue(ev) {
- var value = ev.target.value;
- console.log('change:', value);
- document.getElementById('starRatingRaito').style.width = (value * 2) + '%';
- }
- document.getElementById('starRatingSlider').addEventListener('input', setValue);
- document.getElementById('starRatingSlider').addEventListener('change', setValue);
- document.getElementById('starRatingSlider').addEventListener('click', setValue);
- </script>
- <style>
- .star-rating-container {
- position: relative;
- display: inline-block;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- .star-rating-container * {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- /**
- スライダー.
- */
- .star-rating-slider {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 2;
- width: 100%;
- height: 100%;
- opacity: 0.01;
- }
- input[type="range"]::-webkit-slider-thumb {
- width: 35px;
- height: 35px;
- }
- /**
- * 星の表示.
- */
- .star-rating {
- display: inline-block;
- color: #999999;
- font-size: 50px;
- margin: 0 auto;
- position: relative;
- padding: 0;
- text-shadow: 0px 1px 0 #a2a2a2;
- pointer-events: none;
- }
- .star-rating span {
- padding: 0 0.1em;
- }
- .star-rating-top {
- color: #4fc2cd;
- padding: 0;
- position: absolute;
- z-index: 1;
- display: block;
- top: 0;
- left: 0;
- overflow: hidden;
- }
- .star-rating-bottom {
- padding: 0;
- display: block;
- z-index: 0;
- }
- body {
- margin: 50px;
- text-align: center;
- font-family: 'Open Sans', sans-serif;
- background: #f5f5f5;
- }
- </style>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement