Simple Number Element Controls Demo
How do I make an simple number element controls demo?
Wanted better controls for number elements, so here we go.. What is a simple number element controls demo? How do you make a simple number element controls demo? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.
Simple Number Element Controls Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Number Element Controls Demo</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Simple Number Element Controls</h1>
<div class="number-controls"> <button class="plus js-number-control"> <i class="fa fa-plus-square"></i> </button> <button class="minus js-number-control"> <i class="fa fa-minus-square"></i> </button> <input type="number" pattern="\d*" step="1" min="1" max="5" value="1">
</div>
<p></p>
<div class="number-controls"> <button class="plus js-number-control"> <i class="fa fa-plus-square"></i> </button> <button class="minus js-number-control"> <i class="fa fa-minus-square"></i> </button> <input type="number" pattern="\d*" step="1" min="1" max="3" value="1">
</div>
<p></p>
<div class="number-controls"> <button class="plus js-number-control"> <i class="fa fa-plus-square"></i> </button> <button class="minus js-number-control"> <i class="fa fa-minus-square"></i> </button> <input type="number" pattern="\d*" step="1" min="1" max="4" value="1">
</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>
Simple Number Element Controls Demo - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #345; background-color: #789;
}
h1 { font-weight: 700;
}
.number-controls { position: relative; width: 60px; height: 40px;
}
.number-controls .plus,
.number-controls .minus { position: absolute; width: 20px; height: 20px; padding: 0; margin: 0; font-size: 16px; text-align: center; color: #345; background: none; border: none; cursor: pointer;
}
.number-controls .plus:hover,
.number-controls .minus:hover { color: #123;
}
.number-controls .plus { top: 0; left: 0;
}
.number-controls .minus { bottom: 0; left: 0;
}
.number-controls input[type=number] { position: absolute; top: 0; right: 0; width: 35px; height: 40px; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 16px; color: #345; background: none; border: none; -moz-appearance: textfield;
}
.number-controls input[type=number]::-webkit-inner-spin-button,
.number-controls input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;
}
Simple Number Element Controls Demo - Script Codes JS Codes
(function($){ $(document).ready(function() { /** * Function for manipulating a sibling input of type "number" * from an event fired. Relies on the control for increasing * the number to have a class of .plus. Also requires a min * attribute set on the number to know what not to go below. */ var manipulateNumberInput = function(e) { e.preventDefault(); // Prevent default action. var $numberInput = $(this).siblings('input[type=number]'), currentValue = $numberInput.val() != '' && $numberInput.val() || 1, adjustedValue = parseInt( currentValue ) + ($(this).hasClass('plus') && 1 || -1); $numberInput.val( adjustedValue ).trigger('change'); // Adjust the number input value, trigger onChange. } /** * Runs onchange to keep numbers between max/min values. */ var validateNumberInput = function(e) { var $numberInput = $(this), currentValue = parseInt( $numberInput.val() ), minimumValue = parseInt( $(this).attr('min') ), maximumValue = parseInt( $(this).attr('max') ); if( currentValue < minimumValue ) $numberInput.val( minimumValue ); if( currentValue > maximumValue ) $numberInput.val( maximumValue ); } // Find number controls, attach click events. var $numberControls = $('.js-number-control'); $numberControls.on( 'click', manipulateNumberInput ); // Attach validation listeners. var $numberInputs = $('input[type=number]'); $numberInputs.on( 'change', validateNumberInput ); }); // Document Ready
})(jQuery); // Map jQuery => $
Developer | Bryan Fillmer |
Username | bfillmer |
Uploaded | December 11, 2022 |
Rating | 3 |
Size | 3,384 Kb |
Views | 14,168 |
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 |
JS Playground | 3,242 Kb |
Attribute Modules for CSS | 5,810 Kb |
Continued Angular Testbed | 2,239 Kb |
Prototype Angular JS Workout Log | 2,599 Kb |
Attribute Module CSS Grid Mixins | 5,014 Kb |
Basic Javascript Chaining | 2,399 Kb |
Shopping Site Mockup | 6,977 Kb |
Regex Sensei | 1,551 Kb |
General Tax Calculator | 2,902 Kb |
Useful Loading Overlay | 3,833 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 |
Haml Calendar | Katydecorah | 5,643 Kb |
CSS Patterns | Alyda | 3,953 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Project_one | MOHIM | 9,592 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Getting Started | Viblast | 1,500 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 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!