cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <main>
  <header>
    <h1>RangeTouch + dropdown</h1>
  </header>
  <section class="example">
    <p>How many miles is this vehicle driven per year?<br />
      <span class="smallngrey">On average, a driver logs about 7,500 miles per year.</span></p>
    <div class="example__range">
      <input type="range" max="20000" min="0" value="7000" step="1000" oninput="dataUpdate()" id="mileageInput">
      <p class="sliderlabel" style="float:right;">&gt;20,000 miles</p>
      <p class="sliderlabel">&lt;1,000 miles</p>
    </div>
    <select name="Mileage" id="mileageData" oninput="dataUpdateBack()">
                    <option value="20000">More than 20,000 miles&nbsp;&nbsp;&nbsp;</option>
                    <option value="19000">19K - 20K miles</option>
                    <option value="18000">18K - 19K miles</option>
                    <option value="17000">17K - 18K miles</option>
                    <option value="16000">16K - 17K miles</option>
                    <option value="15000">15K - 16K miles</option>
                    <option value="14000">14K - 15K miles</option>
                    <option value="13000">13K - 14K miles</option>
                    <option value="12000">12K - 13K miles</option>
                    <option value="11000">11K - 12K miles</option>
                    <option value="10000">10K - 11K miles</option>
                    <option value="9000">9K - 10K miles</option>
                    <option value="8000">8K - 9K miles</option>
                    <option value="7000" selected>7K - 8K miles</option>
                    <option value="6000">6K - 7K miles</option>
                    <option value="5000">5K - 6K miles</option>
                    <option value="4000">4K - 5K miles</option>
                    <option value="3000">3K - 4K miles</option>
                    <option value="2000">2K - 3K miles</option>
                    <option value="1000">1K - 2K miles</option>
                    <option value="0">0 - 1K miles</option>
                </select>
  </section>
</main>
            
          
!
            
              /* RangeTouch's css */


/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

a.logo,
img,
legend {
  border: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
small,
summary {
  display: block
}

.btn:focus,
a:focus {
  outline: #343f4a dotted thin
}

body,
figure,
li,
ul {
  margin: 0
}

body,
h1,
h2 {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased
}

audio,
canvas,
video {
  display: inline-block
}

audio:not([controls]) {
  display: none;
  height: 0
}

[hidden],
template {
  display: none
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

a {
  background: 0 0;
  text-decoration: none;
  color: #0081C5;
  border-bottom: 1px dotted currentColor;
  transition: background .3s ease, color .3s ease, border .3s ease
}

a:active,
a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

hr {
  box-sizing: content-box;
  height: 0
}

mark {
  background: #ff0;
  color: #000
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em
}

pre {
  white-space: pre-wrap
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019"
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

svg:not(:root) {
  overflow: hidden
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}

legend {
  padding: 0
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0
}

button,
input {
  line-height: normal
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}

textarea {
  overflow: auto;
  vertical-align: top
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}

@font-face {
  font-family: Avenir;
  src: url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/e4d36745-a861-4a49-aa17-6510e67429d3.woff2) format("woff2"), url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/2cac77ec-9bc0-4ee7-87e4-27650190744f.woff) format("woff");
  font-weight: 400
}

@font-face {
  font-family: Avenir;
  src: url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/65cde95a-ac33-4c65-8198-e37857968d1a.woff2) format("woff2"), url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/7147ec3a-8ff8-4ec9-8c5c-bd1571dc6ae6.woff) format("woff");
  font-weight: 600
}

@font-face {
  font-family: Avenir;
  src: url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/16695c2d-c755-45a2-bdcf-c54843f39afd.woff2) format("woff2"), url(https://d33i624pw6jj68.cloudfront.net/static/fonts/avenir/0.1/5a05cf7f-f332-456f-ae67-d8c26e0d35b3.woff) format("woff");
  font-weight: 700
}

h1,
h2 {
  letter-spacing: -.025em;
  color: inherit;
  margin: 0 0 15px;
  line-height: 1.2
}

h1 {
  font-size: 54px;
  font-size: 3.375rem
}

p,
small {
  margin: 0 0 30px
}

small {
  padding: 0 15px;
  font-size: 14px;
  font-size: .875rem
}

li,
ul {
  list-style: none;
  padding: 0
}

a:focus,
a:hover {
  color: #00BD9C;
  border-bottom-color: transparent
}

a:focus {
  outline-offset: 1px
}

.color--twitter {
  color: #4BAAF4
}

*,
::after,
::before {
  box-sizing: border-box
}

html {
  height: 100%;
  font-size: 100%
}

body {
  padding: 45px 15px 90px;
  background: linear-gradient(to left top, #00BD9C, #0081C5);
  font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

@media only screen and (min-width:480px) {
  body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 90px
  }
}

.btn,
footer {
  padding: 15px;
  color: #4f5b60;
  text-shadow: none
}

.action,
section {
  margin-top: 30px
}

section+section {
  margin-top: 15px
}

header p {
  font-size: 20px;
  font-size: 1.25rem
}

main {
  max-width: 320px;
  margin: 0 auto;
  -webkit-animation: fade-in .2s ease;
  animation: fade-in .2s ease
}

.btn .icon,
a .icon,
footer .icon {
  margin-right: 10px
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, .95);
  -webkit-animation: fade-in-up .2s ease;
  animation: fade-in-up .2s ease
}

.icon {
  fill: currentColor;
  width: 18px;
  height: 18px;
  vertical-align: -3px
}

a svg,
button svg,
label svg {
  pointer-events: none
}

.btn,
.btn__count {
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn {
  background: #fff;
  border: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  transition: background .2s ease, color .2s ease, -webkit-transform .2s ease;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  transition: background .2s ease, color .2s ease, transform .2s ease, -webkit-transform .2s ease;
  font-size: 16px;
  font-size: 1rem;
  white-space: nowrap
}

.btn:focus,
.btn:hover {
  background: rgba(255, 255, 255, .95);
  color: #343f4a
}

.btn:focus {
  outline-offset: 1px
}

.btn:active {
  -webkit-transform: scale(.97);
  transform: scale(.97)
}

.btn--twitter .icon {
  color: #4BAAF4
}

.btn__count {
  position: relative;
  margin-left: 10px;
  padding: 15px 12px;
  min-width: 52.5px;
  background: #fff;
  text-shadow: none;
  color: #4f5b60
}

.btn__count::before {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  left: 2px;
  top: 50%;
  margin-top: -4px;
  background: inherit;
  -webkit-transform: rotate(-45deg) translate(-50%, -50%);
  transform: rotate(-45deg) translate(-50%, -50%)
}

.action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

.action .btn {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1
}

.action .btn__count {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

input[type=range] {
  display: block;
  height: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  background: 0 0
}

input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  background: rgba(52, 63, 74, .5);
  border: 0;
  border-radius: 5px;
  -webkit-user-select: none;
  user-select: none
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -5px;
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #00BD9C, #0081C5);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box
}

input[type=range]::-moz-range-track {
  height: 10px;
  background: rgba(52, 63, 74, .5);
  border: 0;
  border-radius: 5px;
  -moz-user-select: none;
  user-select: none
}

input[type=range]::-moz-range-thumb {
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #00BD9C, #0081C5);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box
}

input[type=range]::-moz-focus-outer {
  border: 0
}

input[type=range]::-ms-track {
  height: 10px;
  background: 0 0;
  border: 0;
  color: transparent
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  height: 10px;
  background: rgba(52, 63, 74, .5);
  border: 0;
  border-radius: 5px;
  -ms-user-select: none;
  user-select: none
}

input[type=range]::-ms-thumb {
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #00BD9C, #0081C5);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box;
  margin-top: 0
}

input[type=range]::-ms-tooltip {
  display: none
}

input[type=range]:focus {
  outline: #343f4a dotted thin;
  outline-offset: 1px
}

.example {
  position: relative;
  text-align: left
}

.example label,
.example__range {
  background: rgba(52, 63, 74, .25);
  border-radius: 100px;
  box-shadow: inset 0 1px 1px rgba(52, 63, 74, .1), 0 1px 0 rgba(255, 255, 255, .15)
}

.example label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0 8px;
  font-size: 12px;
  font-size: .75rem;
  text-transform: uppercase
}

.example__range {
  padding: 10px 15px;
  background: rgba(52, 63, 74, .25)
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

[hidden] {
  display: none!important
}


/* Custom CSS */

body {
  background: #fcf9f3;
  color: #4c3f2e;
}

main {
  max-width: 800px;
}

input[type=range] {
  display: block;
  height: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  border: none;
  background: 0 0
}

input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  background: rgba(235, 235, 235, 1.0);
  border: 0;
  border-radius: 5px;
  -webkit-user-select: none;
  user-select: none
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -5px;
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #566c11, #90b200);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box
}

input[type=range]::-moz-range-track {
  height: 10px;
  background: rgba(235, 235, 235, 1.0);
  border: 0;
  border-radius: 5px;
  -moz-user-select: none;
  user-select: none
}

input[type=range]::-moz-range-thumb {
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #566c11, #90b200);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box
}

input[type=range]::-moz-focus-outer {
  border: 0
}

input[type=range]::-ms-track {
  height: 10px;
  background: 0 0;
  border: 0;
  color: transparent
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  height: 10px;
  background: rgba(52, 63, 74, .5);
  border: 0;
  border-radius: 5px;
  -ms-user-select: none;
  user-select: none
}

input[type=range]::-ms-thumb {
  position: relative;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left top, #566c11, #90b200);
  border: 3px solid #fff;
  border-radius: 100%;
  transition: background .3s ease;
  box-shadow: 0 1px 2px rgba(52, 63, 74, .4);
  box-sizing: border-box;
  margin-top: 0
}

input[type=range]::-ms-tooltip {
  display: none
}

input[type=range]:focus {
  outline: #343f4a dotted thin;
  outline-offset: 1px
}

.example {
  position: relative;
  text-align: left
}

.example__range {
  padding: 10px 0px;
  max-width: 420px;
  background: none;
  box-shadow: none;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px
}

select {
  border: 1px solid #ccc;
  padding: 0px 7px;
  height: 27px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: inset 0 -3px 3px #ccc;
  -webkit-box-shadow: inset 0 -3px 3px #ccc;
  box-shadow: inset 0 -3px 3px #ccc;
  line-height: 25px;
  -webkit-appearance: none;
  color: #584c3c;
  margin: 1px 0px;
  background-image: url('https://pemco.com/_images/members/dropdown-arrow-black.png');
  background-position: right center;
  background-position: right 5px center;
  background-repeat: no-repeat;
  -moz-appearance: none;
  /* These 3 lines are needed to make default down arrow disappear on firefox*/
  text-indent: 0.01px;
  text-overflow: '';
}

select option {
  color: #584c3c;
}

select.notPicked,
option.notPicked {
  color: #999999;
}

select:hover {
  -moz-box-shadow: inset 0 3px 3px #ccc;
  -webkit-box-shadow: inset 0 3px 3px #ccc;
  box-shadow: inset 0 3px 3px #ccc;
}

select:focus {
  outline: 5px;
  -moz-box-shadow: 0px 0px 12px #387bbe/*{global-active-background-color}*/
  ;
  -webkit-box-shadow: 0px 0px 12px #387bbe/*{global-active-background-color}*/
  ;
  box-shadow: 0px 0px 12px #387bbe/*{global-active-background-color}*/
  ;
}

select::-ms-expand {
  display: none;
  /* needed to make default down arrow disappear on IE10+ */
}

.sliderlabel {
  color: #ccc;
  font-size: 11px;
}

.smallngrey {
  color: #aaa;  
  font-style: italic;
  font-size: 13px;
}
            
          
!
            
              //RangeTouch's script
!function(t,e){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e(t,document):"function"==typeof define&&define.amd?define(null,function(){e(t,document)}):t.rangetouch=e(t,document)}("undefined"!=typeof window?window:this,function(t,e){"use strict";function n(t){return t instanceof HTMLElement?t.classList.contains(l.selectors.disabled):!1}function o(t,e,n){t.addEventListener(e,n,!1)}function i(t){var e=(""+t).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return e?Math.max(0,(e[1]?e[1].length:0)-(e[2]?+e[2]:0)):0}function u(t,e){if(1>e){var n=i(parseInt(e));return parseFloat(t.toFixed(n))}return Math.round(t/e)*e}function r(t){var e,n=t.target,o=t.changedTouches[0],i=parseFloat(n.getAttribute("min"))||0,r=parseFloat(n.getAttribute("max"))||100,a=parseFloat(n.getAttribute("step"))||1,c=r-i,s=n.getBoundingClientRect(),d=100/s.width*(l.thumbWidth/2)/100;return e=100/s.width*(o.clientX-s.left),0>e?e=0:e>100&&(e=100),50>e?e-=(100-2*e)*d:e>50&&(e+=2*(e-50)*d),i+u(c*(e/100),a)}function a(t){l.enabled&&"range"===t.target.type&&!n(t.target)&&(t.preventDefault(),t.target.value=r(t),s(t.target,t.type===l.events.end?"change":"input"))}function c(){o(e.body,l.events.start,a),o(e.body,l.events.move,a),o(e.body,l.events.end,a)}function s(t,e,n){t.dispatchEvent(new CustomEvent(e,n))}function d(){return[l.selectors.range,":not(.",l.selectors.disabled,")"].join("")}var l={enabled:!0,selectors:{range:'[type="range"]',disabled:"rangetouch--disabled"},thumbWidth:15,events:{start:"touchstart",move:"touchmove",end:"touchend"}};return function(){if("ontouchstart"in e.documentElement){for(var t=e.querySelectorAll(d()),n=t.length-1;n>=0;n--)t[n].style.touchAction="manipulation",t[n].style.webkitUserSelect="none";c()}}(),{set:function(t,e){l[t]=e}}}),function(){"use strict";function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}return"function"==typeof window.CustomEvent?!1:(t.prototype=window.Event.prototype,void(window.CustomEvent=t))}();

//Script that makes the slider look at the dropdown and vice vs

 function dataUpdate(){
   var x = document.getElementById("mileageInput").value;
   document.getElementById("mileageData").value=x;
 }
    
 function dataUpdateBack(){
   var x = document.getElementById("mileageData").value;
   document.getElementById("mileageInput").value=x;
 }
    
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console