cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <p>Track's <code>border-box</code> perfectly fits within slider's <code>content-box</code>. Thumb moves within the limits of the <code>input</code> element's <code>content-box</code> in Firefox and Edge and within the limits of the track's <code>content-box</code> in Chrome.</p>
<input type='range' value='0'/>
<p>Track's <code>border-box</code> is set to be longer than slider's <code>content-box</code> (Chrome doesn't allow this and Edge cuts it off). Thumb still moves within the limits of the <code>input</code> element's <code>content-box</code> in Firefox and Edge, even though the track width is now different.</p>
<input type='range' value='0'/>
<p>Track's <code>border-box</code> is set to be shorter than slider's <code>content-box</code> (Chrome doesn't allow this). Thumb still moves within the limits of the <code>input</code> element's <code>content-box</code> in Firefox and Edge, even though the track width is now different.</p>
<input type='range' value='0'/>
<p>Track is scaled horizontally to be longer than slider (Edge cuts it off). In Edge, the thumb now moves within an interval the size of the track's <code>border-box</code>, but starting from the left <code>padding</code> limit.</p>
<input type='range' value='0'/>
<p>Track is scaled horizontally to be shorter than slider. In Edge, the thumb now moves within an interval the size of the track's <code>border-box</code>, but starting from the left <code>padding</code> limit.</p>
<input type='range' value='0'/>
            
          
!
            
              @mixin highlight-boxes($c: #f90) {
	box-sizing: border-box;
	border: solid .5em currentcolor;
	padding: .5em;
	background: currentcolor content-box;
	color: rgba($c, .65);
}

@mixin track() {
	height: 3em;
	@include highlight-boxes(#b53)
}

@mixin track-long {
	width: 35em;
}

@mixin track-short {
	width: 15em;
}

@mixin track-scaleup {
	transform: scaleX(2)
}

@mixin track-scaledw {
	transform: scaleX(.5)
}

@mixin thumb() {
	width: 4.5em; height: 4.5em;
	border-radius: 0;
	@include highlight-boxes(#95a)
}

p {
	font: 1em/1.65 trebuchet ms, tahoma, sans-serif;
}

code {
	display: inline-block;
	padding: 2px .25em;
	border-radius: 3px;
	background: #ddd;
	font: 1em consolas, monaco, monospace
}

input {
	&, &::-webkit-slider-thumb {
		-webkit-appearance: none
	}
	
	margin: .25em auto;
	display: block;
	width: 25em; height: 5em;
	@include highlight-boxes;
	font: 1em arial sans-serif;
	
	&::-webkit-slider-runnable-track {
		@include track()
	}
	&::-moz-range-track {
		@include track()
	}
	&::-ms-track {
		@include track()
	}
	
	&::-webkit-slider-thumb {
		margin-top: -1.75em;
		@include thumb()
	}
	&::-moz-range-thumb {
		@include thumb()
	}
	&::-ms-thumb {
		margin-top: 0;
		@include thumb()
	}
	
	&:nth-of-type(2) {
		&::-webkit-slider-runnable-track {
			@include track-long()
		}
		&::-moz-range-track {
			@include track-long()
		}
		&::-ms-track {
			@include track-long()
		}
	}
	
	&:nth-of-type(3) {
		&::-webkit-slider-runnable-track {
			@include track-short()
		}
		&::-moz-range-track {
			@include track-short()
		}
		&::-ms-track {
			@include track-short()
		}
	}
	
	&:nth-of-type(4) {
		&::-webkit-slider-runnable-track {
			@include track-scaleup()
		}
		&::-moz-range-track {
			@include track-scaleup()
		}
		&::-ms-track {
			@include track-scaleup()
		}
	}
	
	&:nth-of-type(5) {
		&::-webkit-slider-runnable-track {
			@include track-scaledw()
		}
		&::-moz-range-track {
			@include track-scaledw()
		}
		&::-ms-track {
			@include track-scaledw()
		}
	}
}
            
          
!
999px
Loading ..................

Console