<div class="stuff">
<h1>Modern, Cute, Usable Sliders.</h1>
<main>
<div id="flat-slider"></div>
<div id="flat-slider-vertical-1"></div>
<div id="flat-slider-vertical-2"></div>
<div id="flat-slider-vertical-3"></div>
</main>
<p>Check them out and even more at: <a href="https://simeydotme.github.io/jQuery-ui-Slider-Pips/#styling-flat" target="_blank">https://simeydotme.github.io/</a></p>
<p>Heavily inspired by <a target="_blank" href="https://codepen.io/thebabydino/pen/RNEEZP">Ana Tudor's Codepen</a> where she does some amazing (and way too complicated for me) css tricks to style HTML5 range inputs in a similar style.</p>
</div>
$bg: #434d5a;
[id*=flat-slider].ui-slider,
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
background: lighten($bg, 25%);
}
[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
border-left-color: #434d5a;
}
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
border-color: white; }
body {
background: #434d5a;
font-family: "Roboto";
}
h1 {
color: lighten($bg, 25%);
padding: 0;
margin: 0;
user-select: none;
cursor: default;
}
p {
color: lighten($bg, 50%);
text-align: center;
margin: 0.5em 1em;
font-weight: 300;
font-size: 1.3em;
&:nth-of-type(1) {
margin-top: 3em;
}
&:last-child {
font-weight: 100;
font-size: 1em;
a {
font-weight: 300;
}
}
}
.stuff {
padding: 50px 50px 50px;
max-width: 900px;
margin: auto;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
View Compiled
$.extend( $.ui.slider.prototype.options, {
animate: 300
});
$("#flat-slider")
.slider({
max: 50,
min: 0,
range: true,
values: [15, 35]
})
.slider("pips", {
first: "pip",
last: "pip"
});
$("#flat-slider-vertical-1")
.slider({
max: 25,
min: 0,
range: "min",
value: 25,
orientation: "vertical"
});
$("#flat-slider-vertical-2")
.slider({
max: 25,
min: 0,
range: "max",
value: 12,
orientation: "vertical"
});
$("#flat-slider-vertical-3")
.slider({
max: 25,
min: 0,
range: "min",
value: 0,
orientation: "vertical"
});
$("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
.slider("pips", {
first: "pip",
last: "pip"
})
.slider("float");
