LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Modern, Cute, Usable Sliders.

Check them out and even more at: https://simeydotme.github.io/

Heavily inspired by Ana Tudor's Codepen where she does some amazing (and way too complicated for me) css tricks to style HTML5 range inputs in a similar style.

CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
[id*=flat-slider].ui-slider,
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
  background: #7e8c9f;
}

[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: #7e8c9f;
  padding: 0;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

p {
  color: #c7cdd5;
  text-align: center;
  margin: 0.5em 1em;
  font-weight: 300;
  font-size: 1.3em;
}
p:nth-of-type(1) {
  margin-top: 3em;
}
p:last-child {
  font-weight: 100;
  font-size: 1em;
}
p:last-child a {
  font-weight: 300;
}

.stuff {
  padding: 50px 50px 50px;
  max-width: 900px;
  margin: auto;
}
JS
$.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");

Description

Based on Ana Tudor's styling of Range Sliders, I have used my own extension for jQueryUI to create really usable and pretty range sliders.
Term
Mon, 11/27/2017 - 21:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv