Skip to content

Instantly share code, notes, and snippets.

@livingston

livingston/index.html

Created April 4, 2015 00:21
Show Gist options
  • Save livingston/a5193a23b6b986f5ac36 to your computer and use it in GitHub Desktop.
Save livingston/a5193a23b6b986f5ac36 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" />
<style id="jsbin-css">
body {
font-family: 'Open Sans', sans-serif;
}
.slider-wrapper {
margin: 50px 11%;
}
.slider-limits {
overflow: hidden;
font-size: 16px;
color: #aaa;
padding: 10px 0 0;
}
.min-limit {
float: left
}
.max-limit {
float: right;
}
.noUi-target {
border-radius: 20px;
height: 20px;
}
.noUi-origin {
border-radius: 20px;
background-image: linear-gradient(#808080,#b7b7b7);
}
.noUi-background { box-shadow: none }
.noUi-connect {
background: #199cd6;
background-image: linear-gradient(#0e6e95, #199cd6);
}
.noUi-horizontal .noUi-handle {
height: 40px;
width: 40px;
border-radius: 50%;
top: -10px;
left: -20px;
border: 0;
background-image: linear-gradient(#fbfbfb, #d9d9d9);
box-shadow: 0 0 3px #d9d9d9
}
.noUi-handle:before, .noUi-handle:after {
font-family: FontAwesome;
content: "\f0d9";
background: transparent;
width: auto;
left: 8px;
color: #6ab1d3;
transition: color 500ms;
top: 10px;
font-size: 18px;
}
.noUi-handle:hover:before, .noUi-handle:hover:after {
color: #0b539c
}
.noUi-handle:after {
content: "\f0da";
left: auto;
right: 8px;
}
.noUi-handle > div {
top: -50px;
text-align: center;
position: absolute;
background: #059dd8;
color: #fff;
font-weight: 400;
font-size: 20px;
padding: 5px 15px;
min-width: 105px;
/* white-space: nowrap; */
left: 50%;
margin-left: -53px;
border-radius: 4px;
box-shadow: 0 3px 3px #aaa;
}
.noUi-handle > div:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #059dd8;
border-bottom: 0;
top: 100%;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<h1>Slider Demo</h1>
<div class='slider-wrapper'>
<div id="slider"></div>
<div class='slider-limits'>
<div class='min-limit'>&euro; 1000</div>
<div class='max-limit'>&euro; 35000</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<script id="jsbin-javascript">
var $slider = $("#slider").noUiSlider({
start: 5000,
connect: 'lower',
step: 100,
range: {
'min': 1000,
'max': 35000
},
format: {
to: function ( value ) {
return '&euro; ' +value.toFixed();
},
from: function ( value ) {
return value.replace(',-', '');
}
}
});
$slider.on("slide", function () {
console.log($(this).val());
});
$slider.Link('lower').to('-inline-');
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<link rel="stylesheet" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" />
</head>
<body>
<h1>Slider Demo</h1>
<div class='slider-wrapper'>
<div id="slider"></div>
<div class='slider-limits'>
<div class='min-limit'>&euro; 1000</div>
<div class='max-limit'>&euro; 35000</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
font-family: 'Open Sans', sans-serif;
}
.slider-wrapper {
margin: 50px 11%;
}
.slider-limits {
overflow: hidden;
font-size: 16px;
color: #aaa;
padding: 10px 0 0;
}
.min-limit {
float: left
}
.max-limit {
float: right;
}
.noUi-target {
border-radius: 20px;
height: 20px;
}
.noUi-origin {
border-radius: 20px;
background-image: linear-gradient(#808080,#b7b7b7);
}
.noUi-background { box-shadow: none }
.noUi-connect {
background: #199cd6;
background-image: linear-gradient(#0e6e95, #199cd6);
}
.noUi-horizontal .noUi-handle {
height: 40px;
width: 40px;
border-radius: 50%;
top: -10px;
left: -20px;
border: 0;
background-image: linear-gradient(#fbfbfb, #d9d9d9);
box-shadow: 0 0 3px #d9d9d9
}
.noUi-handle:before, .noUi-handle:after {
font-family: FontAwesome;
content: "\f0d9";
background: transparent;
width: auto;
left: 8px;
color: #6ab1d3;
transition: color 500ms;
top: 10px;
font-size: 18px;
}
.noUi-handle:hover:before, .noUi-handle:hover:after {
color: #0b539c
}
.noUi-handle:after {
content: "\f0da";
left: auto;
right: 8px;
}
.noUi-handle > div {
top: -50px;
text-align: center;
position: absolute;
background: #059dd8;
color: #fff;
font-weight: 400;
font-size: 20px;
padding: 5px 15px;
min-width: 105px;
/* white-space: nowrap; */
left: 50%;
margin-left: -53px;
border-radius: 4px;
box-shadow: 0 3px 3px #aaa;
}
.noUi-handle > div:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #059dd8;
border-bottom: 0;
top: 100%;
left: 0;
right: 0;
margin: auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var $slider = $("#slider").noUiSlider({
start: 5000,
connect: 'lower',
step: 100,
range: {
'min': 1000,
'max': 35000
},
format: {
to: function ( value ) {
return '&euro; ' +value.toFixed();
},
from: function ( value ) {
return value.replace(',-', '');
}
}
});
$slider.on("slide", function () {
console.log($(this).val());
});
$slider.Link('lower').to('-inline-');</script></body>
</html>
Raw
jsbin.ruqaha.css
body {
font-family: 'Open Sans', sans-serif;
}
.slider-wrapper {
margin: 50px 11%;
}
.slider-limits {
overflow: hidden;
font-size: 16px;
color: #aaa;
padding: 10px 0 0;
}
.min-limit {
float: left
}
.max-limit {
float: right;
}
.noUi-target {
border-radius: 20px;
height: 20px;
}
.noUi-origin {
border-radius: 20px;
background-image: linear-gradient(#808080,#b7b7b7);
}
.noUi-background { box-shadow: none }
.noUi-connect {
background: #199cd6;
background-image: linear-gradient(#0e6e95, #199cd6);
}
.noUi-horizontal .noUi-handle {
height: 40px;
width: 40px;
border-radius: 50%;
top: -10px;
left: -20px;
border: 0;
background-image: linear-gradient(#fbfbfb, #d9d9d9);
box-shadow: 0 0 3px #d9d9d9
}
.noUi-handle:before, .noUi-handle:after {
font-family: FontAwesome;
content: "\f0d9";
background: transparent;
width: auto;
left: 8px;
color: #6ab1d3;
transition: color 500ms;
top: 10px;
font-size: 18px;
}
.noUi-handle:hover:before, .noUi-handle:hover:after {
color: #0b539c
}
.noUi-handle:after {
content: "\f0da";
left: auto;
right: 8px;
}
.noUi-handle > div {
top: -50px;
text-align: center;
position: absolute;
background: #059dd8;
color: #fff;
font-weight: 400;
font-size: 20px;
padding: 5px 15px;
min-width: 105px;
/* white-space: nowrap; */
left: 50%;
margin-left: -53px;
border-radius: 4px;
box-shadow: 0 3px 3px #aaa;
}
.noUi-handle > div:before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 8px solid transparent;
border-top-color: #059dd8;
border-bottom: 0;
top: 100%;
left: 0;
right: 0;
margin: auto;
}
Raw
jsbin.ruqaha.js
var $slider = $("#slider").noUiSlider({
start: 5000,
connect: 'lower',
step: 100,
range: {
'min': 1000,
'max': 35000
},
format: {
to: function ( value ) {
return '&euro; ' +value.toFixed();
},
from: function ( value ) {
return value.replace(',-', '');
}
}
});
$slider.on("slide", function () {
console.log($(this).val());
});
$slider.Link('lower').to('-inline-');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment