UI Challenge - Budget Selector
How do I make an ui challenge - budget selector?
What is a ui challenge - budget selector? How do you make a ui challenge - budget selector? This script and codes were developed by Robert on 04 September 2022, Sunday.
UI Challenge - Budget Selector - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UI Challenge - Budget Selector</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="heading"> <ul> <li>Set your budget!</li> <li id="budget">0K</li> </ul> </div> <div class="range"> <div id="line"> <div id="insideLine"></div> </div> <div id="drag" class="circle" draggable="true"></div> </div> <div class="buttonBar"> <a href="">Back</a> <a href="">Next</a> </div>
</div>
<span id="myNum">096</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
UI Challenge - Budget Selector - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:400,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
html, body { background: #3C3A5A;
}
#myNum { color: rgba(41, 41, 66, 0.5); font-size: 13em; font-weight: 400; font-family: 'Oswald', sans-serif; margin: -110px auto;
}
ul { padding: 0px; margin: 0px;
}
li { list-style: none; float: left;
}
li:last-child { font-size: 1.75em; font-weight: 400; color: #EB6F7F; float: right; margin-top: -5px;
}
.container { width: 400px; height: 135px; padding: 40px; background: #292942; border-radius: 2px; color: lightgray; font-family: 'Lato', sans-serif; font-weight: 300; letter-spacing: 1px; box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); margin: 50px auto;
}
.heading { width: 100%; height: 70px;
}
span { float: right; font-weight: 400; font-size: 1.75em; color: #EB6F7F;
}
.range { position: relative; height: 40px; width: 100%;
}
#line { position: relative; width: 100%; height: 4px; border-radius: 4px; background: #1A1D2B;
}
#insideLine { width: 0px; height: 4px; background: #EB6F7F;
}
.buttonBar { display: block; clear: both;
}
.buttonBar { width: 100%; text-align: right; margin-top: 10px;
}
.buttonBar > a { padding: 8px 40px; border-radius: 25px; line-height: 12px; text-decoration: none; color: gray;
}
.buttonBar > a:first-child { color: gray;
}
.buttonBar > a:hover,
.buttonSelected { color: white; background: #FF5A83;
}
.circle { position: absolute; top: -18px; left: 0px; width: 25px; height: 25px; background: #EB6F7F; border-radius: 50%; border-opacity: .1; border: 8px solid #646464; /* default color */ border: 8px solid rgba(0, 0, 0, 0.3); /* rgba for transparency */
}
UI Challenge - Budget Selector - Script Codes JS Codes
var coordinates = function(element) { element = $(element); var top = element.position().top; var left = element.position().left; var barWidth = left; $('#insideLine').css({width: left}); $('#budget').text(left+"K");
}
$("#drag").draggable({ axis: "x"
}, { containment: "parent"
}, { opacity: 0.5
}, { ondragged: function(event, ui) { console.log("I am being dragged..."); }
}).on("drag", function(event, ui) { coordinates('#drag');
});
Developer | Robert |
Username | AgentRR007 |
Uploaded | September 04, 2022 |
Rating | 3 |
Size | 3,547 Kb |
Views | 28,336 |
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 |
CSS Background Color Split | 1,741 Kb |
Online - Offline Simulator | 2,407 Kb |
Headphones | 3,660 Kb |
Angular Auto Table | 2,917 Kb |
Angular Template | 2,104 Kb |
Santa, my house is over here... | 2,419 Kb |
AngularJS 1.5 Demo | 3,373 Kb |
Angular Alarm | 5,760 Kb |
Custom Directive | 3,425 Kb |
Interface Animation | 3,829 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 |
Monochrome Form | AlienPiglet | 3,096 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Svg sky | Omodev | 7,070 Kb |
Zeichensatz | Moklick | 2,058 Kb |
Price table | Serluk | 5,928 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
A Pen by Kevin | Kevinkenger | 2,642 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 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!