Bootstrap Number Spinner

Developer
Amit Verma
Size
2,038 Kb
Views
12,144
  1. Bootstrap Number Spinner Previews
  2. Bootstrap Number Spinner HTML Codes
  3. Bootstrap Number Spinner CSS Codes
  4. Bootstrap Number Spinner JS Codes

How do I make an bootstrap number spinner?

What is a bootstrap number spinner? How do you make a bootstrap number spinner? This script and codes were developed by Amit Verma on 18 January 2023, Wednesday.

Bootstrap Number Spinner Previews
IQ Test

Bootstrap Number Spinner - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bootstrap Number Spinner</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">	<div class="row">	<div class="col-xs-3 col-xs-offset-3">	<div class="input-group number-spinner">	<span class="input-group-btn">	<button class="btn btn-default" data-dir="dwn"><span class="glyphicon glyphicon-minus"></span></button>	</span>	<input type="text" class="form-control text-center" value="1">	<span class="input-group-btn">	<button class="btn btn-default" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>	</span>	</div>	</div>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Bootstrap Number Spinner - Script Codes CSS Codes

/* just for preview */
.container { padding-top: 40px;
}

Bootstrap Number Spinner - Script Codes JS Codes

$(document).on('click', '.number-spinner button', function () {	var btn = $(this),	oldValue = btn.closest('.number-spinner').find('input').val().trim(),	newVal = 0;	if (btn.attr('data-dir') == 'up') {	newVal = parseInt(oldValue) + 1;	} else {	if (oldValue > 1) {	newVal = parseInt(oldValue) - 1;	} else {	newVal = 1;	}	}	btn.closest('.number-spinner').find('input').val(newVal);
});
Bootstrap Number Spinner - Script Codes
Bootstrap Number Spinner - Script Codes
Home Page Home
Developer Amit Verma
Username amit-webdesigner
Uploaded January 18, 2023
Rating 3
Size 2,038 Kb
Views 12,144
Do you need developer help for Bootstrap Number Spinner?

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!

Amit Verma (amit-webdesigner) Script Codes
Name
Zoom in Effect on Image Hover
Mobile menu icon animations
Hover effects with CSS3
BOX Rotating Card
Price Box Effect
Pricing table hover effect
Hover Effect on Images From Different Directions Using Pure CSS
Image Hover Effect, Text Come On Image Hover
Metro style dynamic Tiles
Simple Vertical Tab
Create amazing Facebook ads 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!