Price range slider

Developer
Dima
Size
3,589 Kb
Views
36,432
  1. Price range slider Previews
  2. Price range slider HTML Codes
  3. Price range slider CSS Codes
  4. Price range slider JS Codes

How do I make an price range slider?

Simple price range slider javascript css. What is a price range slider? How do you make a price range slider? This script and codes were developed by Dima on 17 September 2022, Saturday.

Price range slider Previews
IQ Test

Price range slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>price range slider</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="range-slider"><span>from <input type="number" value="25000" min="0" max="120000"/>	to <input type="number" value="50000" min="0" max="120000"/></span> <input value="25000" min="0" max="120000" step="500" type="range"/> <input value="50000" min="0" max="120000" step="500" type="range"/> <svg width="100%" height="24"> <line x1="4" y1="0" x2="300" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line> </svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Price range slider - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh;
}
input { box-shadow: 0; outline: 0;
}
.range-slider { width: 300px; margin: auto; text-align: center; position: relative; height: 6em;
}
.range-slider svg,
.range-slider input[type=range] { position: absolute; left: 0; bottom: 0;
}
input[type=number] { border: 1px solid #ddd; text-align: center; font-size: 1.6em; -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;
}
input[type=number]:invalid,
input[type=number]:out-of-range { border: 2px solid #ff6347;
}
input[type=range] { -webkit-appearance: none; width: 100%;
}
input[type=range]:focus { outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track { background: #2497e3;
}
input[type=range]:focus::-ms-fill-lower { background: #2497e3;
}
input[type=range]:focus::-ms-fill-upper { background: #2497e3;
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0;
}
input[type=range]::-webkit-slider-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; -webkit-appearance: none; margin-top: -7px;
}
input[type=range]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0;
}
input[type=range]::-moz-range-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer;
}
input[type=range]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper { background: #2497e3; border-radius: 1px; box-shadow: none; border: 0;
}
input[type=range]::-ms-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer;
}

Price range slider - Script Codes JS Codes

(function() { var parent = document.querySelector(".range-slider"); if(!parent) return; var rangeS = parent.querySelectorAll("input[type=range]"), numberS = parent.querySelectorAll("input[type=number]"); rangeS.forEach(function(el) { el.oninput = function() { var slide1 = parseFloat(rangeS[0].value),	slide2 = parseFloat(rangeS[1].value); if (slide1 > slide2) {	[slide1, slide2] = [slide2, slide1]; // var tmp = slide2; // slide2 = slide1; // slide1 = tmp; } numberS[0].value = slide1; numberS[1].value = slide2; } }); numberS.forEach(function(el) { el.oninput = function() {	var number1 = parseFloat(numberS[0].value),	number2 = parseFloat(numberS[1].value); if (number1 > number2) { var tmp = number1; numberS[0].value = number2; numberS[1].value = tmp; } rangeS[0].value = number1; rangeS[1].value = number2; } });
})();
Price range slider - Script Codes
Price range slider - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 3
Size 3,589 Kb
Views 36,432
Do you need developer help for Price range slider?

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!

Dima (dimaZubkov) Script Codes
Name
Glitch
Scroll animating effect
Glitch
Web Audio API
Section Slides
Burger nav
Angular T-shirt shop
Codrops HoverEffectIdeas
Vue radio
Vue cart
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!