More info about the bundle here
Last active
March 10, 2016 10:31
-
-
Save abusedmedia/8b1335c5fe62ac8fc412 to your computer and use it in GitHub Desktop.
Custom slider with text feedback
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <meta name="mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-title" content="prototypon"> | |
| <link rel="stylesheet" type="text/css" href="//prototypon.firebaseapp.com/css/bundle.css" /> | |
| <script src="//prototypon.firebaseapp.com/js/bundle.js"></script> | |
| <link rel="stylesheet" type="text/css" href="proto.css" /> | |
| <script src="proto.js"></script> | |
| </head> | |
| <body class="mobileready"> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| using font-face instead the js from google to override the default font name | |
| to adapt to the name given by Illustrator (i.e. AI use font-family:'Lato-Medium' instead font-family:'Lato':font-weight:300; */ | |
| @font-face { | |
| font-family: 'Lato-Hairline'; | |
| font-style: normal; | |
| font-weight: 400; | |
| src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v11/h3_FseZLI76g1To6meQ4zX-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'), url(https://fonts.gstatic.com/s/lato/v11/Kom15zUm24dIPfIRiNogNuvvDin1pK8aKteLpeZ5c0A.woff) format('woff'); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var svg_path = "ui.svg" | |
| Proto.placeSVG(svg_path, init) | |
| function init() { | |
| Proto.coach('#couchmark') | |
| Proto.textCenter('#lab') | |
| var body = d3.select('svg') | |
| var handle = d3.select('#handler') | |
| var mask = d3.select('#SVGID_2_') | |
| var label = d3.select('#lab').attr('text-anchor', 'middle').text(0) | |
| mask.attr('y', 600) | |
| var isPressed = false | |
| var currPosY | |
| var currDotY | |
| var currMaskY | |
| var mapVal = d3.scale.linear() | |
| .domain([200, 622]) | |
| .range([100, 0]) | |
| handle.on('mousedown', onDown) | |
| .on('touchstart', onDown) | |
| body.on('mouseup', onUp) | |
| .on('touchend', onUp) | |
| body.on('mousemove', onDrag) | |
| .on('touchmove', onDrag) | |
| function onDown() { | |
| var e = d3.mouse(this) | |
| d3.select(this) | |
| .transition() | |
| .ease('bounce') | |
| .attr('r', 52) | |
| isPressed = true | |
| currPosY = e[1] | |
| currMaskY = mask.attr('y') | |
| currDotY = handle.attr('cy') | |
| } | |
| function onUp() { | |
| handle.transition() | |
| .ease('bounce') | |
| .attr('r', 42) | |
| isPressed = false | |
| } | |
| function onDrag() { | |
| var e = d3.mouse(this) | |
| if (isPressed) { | |
| var diff = currPosY - e[1] | |
| if (currDotY - diff > 200 && currDotY - diff < 622) { | |
| handle.attr('cy', currDotY - diff) | |
| mask.attr('y', currMaskY - diff) | |
| label.text(parseInt(mapVal(currDotY - diff))) | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment