Upload

insivika · Nov 7, 2012 · f7d8a0d · f7d8a0d
1 parent 0ac93d2
commit f7d8a0d
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 0 deletions.
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,84 @@
+/* CSS */
+body{
+	padding: 100px;
+	font-family: 'Julius Sans One', sans-serif;
+}
+
+h1{
+	font-size: 64px;
+}
+
+.slider{
+	background: url('../img/grid.png') -25px -25px;
+	height: 60px;
+	position: relative;
+	width: 100%;
+}
+
+.slider > .emptyprogress{
+	background: #97d9fb;
+	border: 3px solid white;
+	cursor: pointer;
+	border-radius: 10px;
+	height: 40%;
+	top:25%;
+	position: absolute;
+	width: 100%;
+
+	-webkit-box-shadow: 1px 1px 3px 0px #ccc;
+	box-shadow: 1px 1px 3px 0px #ccc;
+}
+
+.slider > .progress{
+	background: #14aaf6;
+	border: 3px solid white;
+	cursor: pointer;
+	border-radius: 10px;
+	height: 40%;
+	top:25%;
+	position: absolute;
+	width: 0%;
+
+	-webkit-box-shadow: 1px 1px 3px 0px #ccc;
+	box-shadow: 1px 1px 3px 0px #ccc;
+}
+
+.slider > .indicator{
+	background: url('../img/pointer.png') no-repeat;
+	/*border: 1px solid red;*/
+	cursor: move;
+	height: 100%;
+	margin: 8px auto auto -30px;
+	left: 0%;
+	position: absolute;
+	width:60px;
+}
+
+.info, .info> label > input{
+	font-family: 'Julius Sans One', sans-serif;
+	color: grey;
+}
+
+.info{
+	font-size: 32px;
+	font-weight: bold;
+	margin-top: 30px;
+	width: auto;
+}
+
+.info> label > input{
+	border: none;
+	font-size: 20px;
+	width: 250px;
+}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/grid.png b/img/grid.png
diff --git a/img/pointer.png b/img/pointer.png
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="es-ES">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width">
+
+        <title>Slider demo - Ninja Cod3</title>
+
+        <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
+        <link rel="stylesheet" href="css/main.css">
+
+    </head>
+    <body>
+
+        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+        <script type="text/javascript" src="js/main.js"></script>
+        <h1>Simple Slider</h1>
+
+        <div class='slider'>
+            <div class='emptyprogress'></div>
+            <div class='progress'></div>
+            <div class='indicator'></div>
+        </div>
+
+        <div class='info'>
+            <label>
+                Value: 
+                <input type="text" id="valueSlider" value="0" />
+            </label>
+        </div>
+    </body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,32 @@
+$(document).on('ready', function(){
+
+	function moveSlider(e){
+		e.preventDefault();
+
+		var pos 	= $(e.currentTarget).offset()
+		,	posX	= e.pageX - pos.left
+		,	value	= posX*100/$(e.currentTarget).outerWidth();
+
+		if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){
+
+			$('.slider > .progress').css('width', posX+'px');
+			$('.slider > .indicator').css('left', posX+'px');
+
+			$('#valueSlider').val(value);
+
+		}
+	}
+
+	$('.slider').on('mousedown', function(e){
+
+		moveSlider(e);
+
+		$(this).on('mousemove', function(e){
+			moveSlider(e);
+		});
+
+	}).on('mouseup', function(){
+		$(this).off('mousemove');
+	});
+
+});