Learning to style range inputs

Developer
Robert Lowe
Size
4,175 Kb
Views
36,432
  1. Learning to style range inputs Previews
  2. Learning to style range inputs HTML Codes
  3. Learning to style range inputs CSS Codes
  4. Learning to style range inputs JS Codes

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 Previews
IQ Test

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); } };
});
Learning to style range inputs - Script Codes
Learning to style range inputs - Script Codes
Home Page Home
Developer Robert Lowe
Username rlo206
Uploaded July 23, 2022
Rating 4
Size 4,175 Kb
Views 36,432
Do you need developer help for Learning to style range inputs?

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!

Robert Lowe (rlo206) Script Codes
Name
CSS Color Wheel Loaders
Exploring ngForm
Customizable ripples with angular
Simple changelog display with AngularJS and Flexbox
The Rainball
Semantic Element Document Outline
Testing Semantic UI Grid
Google Mic Icon
Whirlpool Spinner with 4 sizes
Crazy Tables
Create amazing captions 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!