Price Slider
How do I make an price slider?
What is a price slider? How do you make a price slider? This script and codes were developed by Anoop on 06 September 2022, Tuesday.
Price Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Price Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="block">
<div id="slider"></div> <ul id="host-plan-grid"> <li id="hplanblock-1" style="display: block;"> <div class="plan-name"> <a class="one">Plan 1</a> <a class="two">Plan 2</a> <a class="three">Plan 3</a> <a class="four">Plan 4</a> </div><!-- plan-name --> <div class="det-bloc"> <div class="col-01"> <p>Cpu Cores:</p> <h2>1</h2> </div><!-- col-01 --> <div class="col-01"> <p>Memory:</p> <h2>250MB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Disk Space:</p> <h2>10GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Bandwidth:</p> <h2>2000GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Total Price:</p> <h2>£4 pm</h2> </div><!-- col-01 --> </div><!--det-bloc --> </li> <li id="hplanblock-2" style="display: none;"> <div class="plan-name"> <a class="one">Plan 1</a> <a class="two">Plan 2</a> <a class="three">Plan 3</a> <a class="four">Plan 4</a> </div><!-- plan-name --> <div class="det-bloc"> <div class="col-01"> <p>Cpu Cores:</p> <h2>2</h2> </div><!-- col-01 --> <div class="col-01"> <p>Memory:</p> <h2>500MB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Disk Space:</p> <h2>30GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Bandwidth:</p> <h2>2000GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Total Price:</p> <h2>£8 pm</h2> </div><!-- col-01 --> </div><!--det-bloc --> </li> <li id="hplanblock-3" style="display: none;"> <div class="plan-name"> <a class="one">Plan 1</a> <a class="two">Plan 2</a> <a class="three">Plan 3</a> <a class="four">Plan 4</a> </div><!-- plan-name --> <div class="det-bloc"> <div class="col-01"> <p>Cpu Cores:</p> <h2>3</h2> </div><!-- col-01 --> <div class="col-01"> <p>Memory:</p> <h2>2GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Disk Space:</p> <h2>50GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Bandwidth:</p> <h2>2000GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Total Price:</p> <h2>£16 pm</h2> </div><!-- col-01 --> </div><!--det-bloc --> </li> <li id="hplanblock-4" style="display: none;"> <div class="plan-name"> <a class="one">Plan 1</a> <a class="two">Plan 2</a> <a class="three">Plan 3</a> <a class="four">Plan 4</a> </div><!-- plan-name --> <div class="det-bloc"> <div class="col-01"> <p>Cpu Cores:</p> <h2>4</h2> </div><!-- col-01 --> <div class="col-01"> <p>Memory:</p> <h2>4GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Disk Space:</p> <h2>80GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Bandwidth:</p> <h2>2000GB</h2> </div><!-- col-01 --> <div class="col-01"> <p>Total Price:</p> <h2>£32 pm</h2> </div><!-- col-01 --> </div><!--det-bloc --> </li> </ul> </div><!--block-->
</div><!--wrapper--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Price Slider - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Exo+2:400,600);
body{font-family: 'Exo 2', sans-serif;}
.wrapper{margin:0 auto; width:1024px;}
.block{width:1024px; float:left; margin-top: 100px;}
.plan-name{float: left;width: 100%;margin: 20px 0;font-size: 18px; font-weight: 600;}
.plan-name a{float: left;width: 25%;text-align: center; cursor:pointer;}
.plan-name a.one{text-align: left;}
.plan-name a.four{text-align: right;}
.det-bloc{float: left;}
.col-01{float: left;color: #fff; width: 150px; padding: 15px; margin: 10px; background: rgb(136,183,62); /* Old browsers */ background: -moz-linear-gradient(top, rgb(136,183,62) 0%, rgb(105,158,22) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136,183,62)), color-stop(100%,rgb(105,158,22))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88b73e', endColorstr='#699e16',GradientType=0 ); /* IE6-9 */
}
.det-bloc h2{font-size: 24px;margin-top: 15px;}
Price Slider - Script Codes JS Codes
$(function(){ $( "#slider" ).slider({ range: "min", animate:true, value:1, min: 1, max: 4, step: 1, slide: function(event, ui) { $('#host-plan-grid li').css({display:'none'}); $('#hplanblock-'+ui.value).css({display:'block'}); } }); $('.one').click(function(e) { moveSlider(e,1); }); $('.two').click(function(e) { moveSlider(e,2); }); $('.three').click(function(e) { moveSlider(e,3); }); $('.four').click(function(e) { moveSlider(e,4); }); function moveSlider(e, num) { e.preventDefault(); $('#slider').slider( 'value', [num] ); val = num; valCheck(); } function valCheck() { if (val == 1) { $('#hplanblock-1').css('display', 'block'); } else { $('#hplanblock-1').css('display', 'none'); } if (val == 2) { $('#hplanblock-2').css('display', 'block'); } else { $('#hplanblock-2').css('display', 'none'); } if (val == 3) { $('#hplanblock-3').css('display', 'block'); } else { $('#hplanblock-3').css('display', 'none'); } if (val == 4) { $('#hplanblock-4').css('display', 'block'); } else { $('#hplanblock-4').css('display', 'none'); } } })
Developer | Anoop |
Username | anoopjohn |
Uploaded | September 06, 2022 |
Rating | 3 |
Size | 2,985 Kb |
Views | 34,408 |
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 |
Parallax Effect | 2,393 Kb |
Simple jQuery accordion menu | 2,089 Kb |
Hide select arrow in Firefox | 1,747 Kb |
Vue App | 2,070 Kb |
A Pen by Anoop | 330,760 Kb |
Example | 1,707 Kb |
Vue Web App | 3,284 Kb |
Pie Chart | 4,762 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 |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Tree growth tests | Orchard | 3,818 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Tooltip in table | Roine | 3,713 Kb |
Addthis_button | Esambino | 1,691 Kb |
Break Out | AzazelN28 | 12,431 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
TheCalendar.js | The-teacher | 6,330 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!