Learning to style range inputs
How do I make an learning to style range inputs?
What is a learning to style range inputs? How do you make a learning to style range inputs? This script and codes were developed by Robert Lowe on 23 July 2022, Saturday.
Learning to style range inputs - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Learning to style range inputs</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/hint.css/1.3.5/hint.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app-container" ng-app="angularPageApp" ng-controller="angularPageAppCtrl"> <div class="box"> <input-range min="0" max="100" classname="minimal"></input-range> <input-range min="0" max="100" classname="minimal-classic"></input-range> <input-range min="0" max="100" classname="modern"></input-range> <input-range min="0" max="100" classname="yolo"></input-range> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Learning to style range inputs - Script Codes CSS Codes
*, *::before, *::after { box-sizing: border-box;
}
body { font-family: 'Open Sans', sans-serif; margin: 0; padding: 0; background-color: #333;
}
.box { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 80vh; margin: 5em;
}
.input-range { display: flex; flex-flow: row nowrap; width: 100%; min-width: 11em; margin-bottom: 2em;
}
.input-range input[type="range"] { flex-grow: 1; line-height: 1; height: 2em; background-color: transparent; cursor: pointer; -webkit-appearance: none; -moz-appearance: none;
}
.input-range input[type="range"]:focus { outline: none;
}
.input-range input[type="range"]::-moz-focus-inner { border: 0;
}
.input-range .value-display { color: white;
}
.input-range.minimal input[type="range"]::-webkit-slider-thumb { position: relative; width: 2em; height: 2em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 50%; -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-moz-range-thumb { position: relative; width: 2em; height: 2em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 50%; -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-ms-thumb { position: relative; width: 2em; height: 2em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 50%; -webkit-appearance: none;
}
.input-range.minimal input[type="range"]::-webkit-slider-runnable-track { height: 1.1em; border-bottom: 0.2em solid white;
}
.input-range.minimal input[type="range"]::-moz-range-track { height: 1.1em; border-bottom: 0.2em solid white;
}
.input-range.minimal input[type="range"]::-ms-track { height: 1.1em; border-bottom: 0.2em solid white;
}
.input-range.minimal .value-display { padding-left: 0.5em; padding-top: 0.6em;
}
.input-range.minimal-classic input[type="range"]::-webkit-slider-thumb { width: 1em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 0.2em; -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-moz-range-thumb { width: 1em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 0.2em; -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-ms-thumb { width: 1em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: #333; border: 0.2em solid white; border-radius: 0.2em; -webkit-appearance: none;
}
.input-range.minimal-classic input[type="range"]::-webkit-slider-runnable-track { height: 1em; border: 0.2em solid grey; border-radius: 0.2em;
}
.input-range.minimal-classic input[type="range"]::-moz-range-track { height: 1em; border: 0.2em solid grey; border-radius: 0.2em;
}
.input-range.minimal-classic input[type="range"]::-ms-track { height: 1em; border: 0.2em solid grey; border-radius: 0.2em;
}
.input-range.minimal-classic .value-display { padding-left: 0.5em; padding-top: 0.3em;
}
.input-range.modern { box-shadow: inset 0 0 0.5em rgba(0, 0, 0, 0.6), 0 0 0.3em rgba(255, 255, 255, 0.1); border-radius: 0.2em; background-color: #F64740; padding: 0.5em;
}
.input-range.modern input[type="range"] { margin: 0;
}
.input-range.modern input[type="range"]::-webkit-slider-thumb { width: 1.2em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: white; border-radius: 0.2em; -webkit-appearance: none; box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-moz-range-thumb { width: 1.2em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: white; border-radius: 0.2em; -webkit-appearance: none; box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-ms-thumb { width: 1.2em; height: 2em; margin-top: -0.6em; cursor: pointer; background-color: white; border-radius: 0.2em; -webkit-appearance: none; box-shadow: 0 0 0.5em black;
}
.input-range.modern input[type="range"]::-webkit-slider-runnable-track { height: 1em; border: 0.2em solid #F7F7FF; border-radius: 0.2em;
}
.input-range.modern input[type="range"]::-moz-range-track { height: 1em; border: 0.2em solid #F7F7FF; border-radius: 0.2em;
}
.input-range.modern input[type="range"]::-ms-track { height: 1em; border: 0.2em solid #F7F7FF; border-radius: 0.2em;
}
.input-range.modern .value-display { padding-left: 0.5em; padding-top: 0.2em;
}
.input-range.yolo { box-shadow: inset 0.1em 0 0.1em rgba(255, 255, 255, 0.4), inset -0.1em 0 0.1em rgba(255, 255, 255, 0.4), inset 0 0.1em 0.1em rgba(255, 255, 255, 0.4), inset 0 -0.1em 0.1em rgba(255, 255, 255, 0.4); border-radius: 2em; background-color: #944BBB; padding: 0.5em;
}
.input-range.yolo input[type="range"] { margin: 0;
}
.input-range.yolo input[type="range"]::-webkit-slider-thumb { width: 2em; height: 2em; margin-top: -0.5em; cursor: pointer; background-color: #531CB3; border-radius: 2em; -webkit-appearance: none; box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-moz-range-thumb { width: 2em; height: 2em; margin-top: -0.5em; cursor: pointer; background-color: #531CB3; border-radius: 2em; -webkit-appearance: none; box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-ms-thumb { width: 2em; height: 2em; margin-top: -0.5em; cursor: pointer; background-color: #531CB3; border-radius: 2em; -webkit-appearance: none; box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.7);
}
.input-range.yolo input[type="range"]::-webkit-slider-runnable-track { height: 1em; border-radius: 0.2em;
}
.input-range.yolo input[type="range"]::-moz-range-track { height: 1em; border-radius: 0.2em;
}
.input-range.yolo input[type="range"]::-ms-track { height: 1em; border-radius: 0.2em;
}
.input-range.yolo .value-display { padding-left: 0.5em; padding-top: 0.2em;
}
Learning to style range inputs - Script Codes JS Codes
var PageApp = angular.module('angularPageApp', ['ngSanitize']);
PageApp.controller('angularPageAppCtrl', function($scope) {});
PageApp.directive('inputRange', function() { return { restrict: 'E', replace: true, scope: { minval: '@', maxval: '@', stepval: '@', currentval: '@', classname: '@' }, controller: function($scope) { $scope.defaults = { minval: 1, maxval: 100, stepval: 1, currentval: 2, classname: '' }; }, template: [ '<div class="input-range {{ classname }}">', '<input type="range" min="{{ minval }}" max="{{ maxval }}" step="{{ stepval }}" value="{{ currentval }}" ', 'ng-model="currentval"/>', '<div class="value-display">{{ currentval }}</div>', '</div>' ].join(''), link: function(scope, element, attrs) { angular.extend(scope, scope.defaults); } };
});
Developer | Robert Lowe |
Username | rlo206 |
Uploaded | July 23, 2022 |
Rating | 4 |
Size | 4,175 Kb |
Views | 36,432 |
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!
Name | Size |
Crazy Tables | 3,065 Kb |
Fly-Through-Loader | 2,936 Kb |
Editable Table Concept | 7,026 Kb |
Exploring ngForm | 7,554 Kb |
The Rainball | 4,656 Kb |
A Pen by Robert Lowe | 4,312 Kb |
Testing Semantic UI Grid | 2,832 Kb |
Animated slider in pure angular | 5,111 Kb |
Draggables in pure angular | 5,167 Kb |
CSS Color Wheel Loaders | 5,381 Kb |
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!
Name | Username | Size |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Main page display | BarryKe | 4,562 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!