Multi-range Jquery

Developer
Robic
Size
3,166 Kb
Views
42,504
  1. Multi-range Jquery Previews
  2. Multi-range Jquery HTML Codes
  3. Multi-range Jquery CSS Codes
  4. Multi-range Jquery JS Codes

How do I make an multi-range jquery?

What is a multi-range jquery? How do you make a multi-range jquery? This script and codes were developed by Robic on 11 August 2022, Thursday.

Multi-range Jquery Previews
IQ Test

Multi-range Jquery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-range Jquery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="multirange">	<input type="range" min="0" max="150" value="4" class="lower"> <input type="range" min="0" max="150" value="100" class="upper">	<span class="line"></span>
</div>
<p><span class="result-l">4</span> lits</p>
<p><span class="result-u">100</span> lits</p> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Multi-range Jquery - Script Codes CSS Codes

input[type=range] { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 155px; margin: 0; padding: 0 2px; overflow: hidden; border: 0; border-radius: 1px; outline: none; background: -webkit-linear-gradient(grey, grey) no-repeat center; background: linear-gradient(grey, grey) no-repeat center; background-size: 100% 2px; pointer-events: none;
}
input[type=range]:active, input[type=range]:focus { outline: none;
}
input[type=range]::-webkit-slider-thumb { height: 15px; width: 15px; border-radius: 50%; border: 2px solid #1BAE73; background: white; background-color: #fff; position: relative; margin: 5px 0; cursor: pointer; -webkit-appearance: none; appearance: none; pointer-events: all; z-index: 2;
}
input[type=range]::-webkit-slider-thumb::before { content: ' '; display: block; position: relative; top: 13px; left: 100%; width: 2000px; height: 2px; background: #1BAE73;
}
.multirange { position: relative; height: 25px;
}
.multirange input[type=range] { position: absolute;
}
.multirange input[type=range]:nth-child(1)::-webkit-slider-thumb::before { background-color: #1BAE73;
}
.multirange input[type=range]:nth-child(2) { background: none;
}
.multirange input[type=range]:nth-child(2)::-webkit-slider-thumb::before { background-color: #979797;
}
.lower { position: relative;
}
.line { position: absolute; left: calc(4px + 15px); top: calc(50% - 1px); content: ""; display: block; width: calc(100px - 19px); background: #1BAE73; height: 2px; z-index: 0;
}

Multi-range Jquery - Script Codes JS Codes

var lower = $('.lower');	var upper = $('.upper');	var lowerVal = parseInt(lower.val());	var upperVal = parseInt(upper.val());	var resultL = $('.result-l');	var resultU = $('.result-u');	var lowMin = parseInt(lower.attr('min'));	var lowMax = parseInt(lower.attr('max'));	var upMin = parseInt(upper.attr('min'));	var upMax = parseInt(upper.attr('max'));	var line = $('.line');	var lineW = upperVal - lowerVal - 15;	line.width(lineW);	console.log(lineW);	lower.on('input', function(){	lowerVal = parseInt(lower.val());	upperVal = parseInt(upper.val()); if (upperVal <= lowerVal + 1 ) {	upper.val(lowerVal + 2)	if (lowerVal == lowMin) { upper.val(lowerVal + 2)	} }	resultL.html(lowerVal)	resultU.html(upperVal)	lineW = upperVal - lowerVal;	line.css({'left': + lowerVal + 'px'});	line.width(lineW);	})	upper.on('input', function(){	lowerVal = parseInt(lower.val()); upperVal = parseInt(upper.val()); if (lowerVal >= upperVal - 1) {	lower.val(upperVal - 2)	if (upperVal == upMax) { lower.val(upperVal - 2)	} }	resultL.html(lowerVal)	resultU.html(upperVal)	lineW = upperVal - lowerVal;	line.css({'left': + lowerVal + 'px'});	line.width(lineW);	})
Multi-range Jquery - Script Codes
Multi-range Jquery - Script Codes
Home Page Home
Developer Robic
Username AudreyRBC
Uploaded August 11, 2022
Rating 3
Size 3,166 Kb
Views 42,504
Do you need developer help for Multi-range Jquery?

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!

Robic (AudreyRBC) Script Codes
Name
Multifiltre
A Pen by Robic
Ajax utick
Geoloc Realtime
Tickets counter
Select with popup
Create amazing art & images 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!