Range-rs Slider!

Developer
Afiq Xilantra
Size
2,050 Kb
Views
80,960
  1. Range-rs Slider! Previews
  2. Range-rs Slider! HTML Codes
  3. Range-rs Slider! CSS Codes

How do I make an range-rs slider!?

Someone asked me if I have any guide for non-designers to describe what they want, so I made this based on Design Crowd guideline.. What is a range-rs slider!? How do you make a range-rs slider!? This script and codes were developed by Afiq Xilantra on 13 June 2022, Monday.

Range-rs Slider! Previews
IQ Test

Range-rs Slider! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Range-rs Slider!</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="gahh"> <span class="naknak">Design Guideline</span> <label class="kiri">Elegant</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Bold</label> <br> <label class="kiri">Playful</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Serious</label> <br> <label class="kiri">Traditional</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Modern</label> <br> <label class="kiri">Personable</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Professional</label> <br> <label class="kiri">Feminine</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Masculine</label> <br> <label class="kiri">Colorful</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Conservative</label> <br> <label class="kiri">Economical</label> <input type="range" class="melintang" min="10" value="0" max="100" step="10"> <label>Upmarket</label>
</div>
</body>
</html>

Range-rs Slider! - Script Codes CSS Codes

body { background: #f5f5f5;
}
.naknak { font-weight:bold; color: grey; font-size: 20px; display: block; margin-bottom: 20px;
}
.gahh { display: block; margin: 50px auto; width: 470px; background: #fff; border-radius: 5px; color: #999; font-family: sans-serif; padding: 20px;
}
.kiri { width:90px; text-align: right; display: inline-block;
}
input[type=range].melintang { outline: none; -webkit-appearance: none; background-image: linear-gradient(90deg, #f1c40f 20%, #a66abe 20%, #a66abe 40%, #3498db 40%, #3498db 60%, #1abc9c 60%, #1abc9c 80%, #e74c3c 80%, #e74c3c 100%); height: 10px; width:250px; border-radius: 10px; margin: 10px;
}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #34495e; width: 20px; height: 20px; border-radius: 20px; cursor: pointer;
}
Range-rs Slider! - Script Codes
Range-rs Slider! - Script Codes
Home Page Home
Developer Afiq Xilantra
Username Afiq
Uploaded June 13, 2022
Rating 4
Size 2,050 Kb
Views 80,960
Do you need developer help for Range-rs Slider!?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Afiq Xilantra (Afiq) Script Codes
Name
Responsive HTML5 Map
Infinite Scroll Lazy Loading Gallery With Simple jQuery
Login with flip 3d animation
Animated 404
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!