Flat Slider

Here's a nice example of a modern, flat style slider using pips. There are no labels so this kind of slider would be purely visual without much help to the user for knowing their real chosen value. In this example we make use of the .ui-slider-pip-inrange class to create the nice "filled in" effect on the pips.

The style is borrowed from Ana Tudor's codepen which she states is taken from somewhere else. (I couldn't find the source).

Be sure to check out the css to see how it's done!

</>
{;}
($)
              <div id="flat-slider"></div>

              <div class="vertical">
                
                <div id="flat-slider-vertical-1"></div>
                <div id="flat-slider-vertical-2"></div>
                <div id="flat-slider-vertical-3"></div>

              </div>

            
              #flat-slider.ui-slider {
                background: #d5cebc;
                border: none;
                border-radius: 0; }

                #flat-slider.ui-slider .ui-slider-handle {
                  width: 20px;
                  height: 20px;
                  border-radius: 50% 50% 0;
                  border-color: transparent;
                  transition: border 0.4s ease; }

                  #flat-slider.ui-slider .ui-slider-handle.ui-state-hover, 
                  #flat-slider.ui-slider .ui-slider-handle.ui-state-focus, 
                  #flat-slider.ui-slider .ui-slider-handle.ui-state-active {
                    border-color: #172f38; }

                #flat-slider.ui-slider .ui-slider-pip .ui-slider-line {
                  background: #d5cebc;
                  transition: all 0.4s ease; }

                #flat-slider.ui-slider.ui-slider-horizontal {
                  height: 6px; }

                  #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-handle {
                    -webkit-transform: rotateZ(45deg);
                            transform: rotateZ(45deg);
                    top: -25px;
                    margin-left: -10px; }

                  #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip {
                    top: 10px; }

                    #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip .ui-slider-line {
                      width: 2px;
                      height: 10px;
                      margin-left: -1px; }

                    #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
                      height: 20px; }

                    #flat-slider.ui-slider.ui-slider-horizontal .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                      height: 12px; }

                #flat-slider.ui-slider.ui-slider-vertical {
                  width: 6px;
                  height: 125px;
                  display: inline-block;
                  margin: 0 15%; }

                  #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle {
                    -webkit-transform: rotateZ(-45deg);
                            transform: rotateZ(-45deg);
                    left: -25px;
                    margin-bottom: -10px; }

                  #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip {
                    left: 10px; }

                    #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip .ui-slider-line {
                      height: 2px;
                      width: 10px;
                      margin-top: -1px; }

                    #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line {
                      width: 20px; }

                    #flat-slider.ui-slider.ui-slider-vertical .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                      width: 12px; }

                    #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip,
                    #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip {
                      visibility: visible;
                      opacity: 1;
                      border: none;
                      background: transparent;
                      left: 50%;
                      width: 30px;
                      margin-left: -15px;
                      text-align: center;
                      color: white;
                      font-weight: normal;
                      top: 10px;
                      -webkit-transform: rotateZ(45deg);
                              transform: rotateZ(45deg); }

                      #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle .ui-slider-tip:before,
                      #flat-slider.ui-slider.ui-slider-vertical .ui-slider-handle[class*=ui-state-] .ui-slider-tip:before {
                        display: none; }

              #flat-slider .ui-slider-handle,
              #flat-slider .ui-slider-range,
              #flat-slider .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
              #flat-slider .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                background-color: #25daa5; }


              #flat-slider-vertical-1 .ui-slider-handle,
              #flat-slider-vertical-1 .ui-slider-range,
              #flat-slider-vertical-1 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
              #flat-slider-vertical-1 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                background-color: #f27793; }


              #flat-slider-vertical-2 .ui-slider-handle,
              #flat-slider-vertical-2 .ui-slider-range,
              #flat-slider-vertical-2 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
              #flat-slider-vertical-2 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                background-color: #bd77f2; }


              #flat-slider-vertical-3 .ui-slider-handle,
              #flat-slider-vertical-3 .ui-slider-range,
              #flat-slider-vertical-3 .ui-slider-pip[class*=ui-slider-pip-selected] .ui-slider-line,
              #flat-slider-vertical-3 .ui-slider-pip.ui-slider-pip-inrange .ui-slider-line {
                background-color: #67c3ec; }

            
              $("#flat-slider")
                  .slider({
                      max: 50,
                      min: 0,
                      range: true,
                      values: [15, 35]
                  })
                  .slider("pips", {
                      first: "pip",
                      last: "pip"
                  });

              $("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
                  .slider({
                      max: 25,
                      min: 0,
                      range: "min",
                      value: 20,
                      orientation: "vertical"
                  })
                  .slider("pips", {
                      first: "pip",
                      last: "pip"
                  })
                  .slider("float");