Styled slider

Developer
Jeplaa
Size
2,346 Kb
Views
18,216
  1. Styled slider Previews
  2. Styled slider HTML Codes
  3. Styled slider CSS Codes
  4. Styled slider JS Codes

How do I make an styled slider?

What is a styled slider? How do you make a styled slider? This script and codes were developed by Jeplaa on 01 October 2022, Saturday.

Styled slider Previews
IQ Test

Styled slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Styled slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <output id="volume">25%</output>
<div class="content"> <input type="range" value="25">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Styled slider - Script Codes CSS Codes

/* Best result in Webkit Browser */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,300');
html { background: rgba(0, 0, 0, 0.8) url( "http://oi64.tinypic.com/i3zbs7.jpg" ); }
#volume
{ position: absolute;	top: 25px; left: 0; right: 0; text-align: center; font: 400 40px 'Raleway', sans-serif;	color: #8A8A8A;
}
.content
{ position: relative; top: 100px;	width: 350px; margin: 0 auto;
}
input[type="range"]
{	-webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important;	-o-appearance: none !important;	appearance: none !important;	width: 350px; height: 17px; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #444444), color-stop(0.85, #222222)); background-image: -moz-gradient(linear, left bottom, left top, color-stop(0.15, #444444), color-stop(0.85, #222222));	background-image: -ms-gradient(linear, left bottom, left top, color-stop(0.15, #444444), color-stop(0.85, #222222));	background-image: -o-gradient(linear, left bottom, left top, color-stop(0.15, #444444), color-stop(0.85, #222222));	background-image: gradient(linear, left bottom, left top, color-stop(0.15, #444444), color-stop(0.85, #222222));	outline: none;	border: 0;	border-radius: 20px; cursor: pointer;
}
input[type='range']::-webkit-slider-thumb
{	-webkit-appearance: none !important; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.15, #8A8A8A), color-stop(0.85, #585858));	height: 17px;	width: 100px;	border-radius: 20px;
}
input[type='range']::-moz-slider-thumb
{ -webkit-appearance: none !important; background-image: -moz-gradient(linear, left bottom, left top, color-stop(0.15, #8A8A8A), color-stop(0.85, #585858)); height: 17px;	width: 100px; border-radius: 20px;
}
input[type="range"]:before
{	position: absolute; content: '\f104'; font: 17px 'FontAwesome'; float: left; left: -15px; top: 1px; color: #8A8A8A;
}
input[type="range"]:after
{ position: absolute; content: '\f105'; font: 17px 'FontAwesome'; float: right; right: -17px; top: 1px; color: #8A8A8A;
}

Styled slider - Script Codes JS Codes

$( "input" ).on( "change mousemove", function()
{ var value = $( this ).val(); $( "#volume" ).text( value + "%" );
});
Styled slider - Script Codes
Styled slider - Script Codes
Home Page Home
Developer Jeplaa
Username Jeplaa
Uploaded October 01, 2022
Rating 3.5
Size 2,346 Kb
Views 18,216
Do you need developer help for Styled 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!

Jeplaa (Jeplaa) Script Codes
Name
Steam Community Profile Concept
SteamBot page - WIP
Simple Filter
Universe
Animated Boxes
Simple Flat Menu
Drawing with Canvas
Particles
Dropdown Menu UI
Steam Game Servers
Create amazing web content 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!