Simple Number Element Controls Demo

Developer
Bryan Fillmer
Size
3,384 Kb
Views
14,168
  1. Simple Number Element Controls Demo Previews
  2. Simple Number Element Controls Demo HTML Codes
  3. Simple Number Element Controls Demo CSS Codes
  4. Simple Number Element Controls Demo JS Codes

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

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 => $
Simple Number Element Controls Demo - Script Codes
Simple Number Element Controls Demo - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3
Size 3,384 Kb
Views 14,168
Do you need developer help for Simple Number Element Controls Demo?

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!

Bryan Fillmer (bfillmer) Script Codes
Name
Angular Animation Playground
Attribute Module CSS Grid Mixins
Project Euler Problem 17
On A Boat
General Tax Calculator
Five Programming Problems
Attribute Modules for CSS
YOLO KEITH
Regex Sensei
Toggle Overlay on UL
Create amazing blog posts 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!