kuoe0
1/10/2014 - 4:07 AM

semantic-ui-style-range-input.html

semantic-ui-style-range-input.html
content_copyfile_download
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
		<title>semantic-slider</title>
		<style>

		.ui.slider.range input[type="range"] {
			-webkit-appearance: none;
			border-width: 1px;
			border-style: solid;
			border-radius: 50rem;
			border-color: rgba(0, 0, 0, 0.1);
			padding: 3px 5px;
		}

		.ui.slider.range input[type="range"]::-moz-range-track {
			background: none;
			border: none;
		}

		.ui.slider.range input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			background: #89B84C;
			border-radius: 50rem;
			height: 0.7em;
			width: 0.7em;
		}

		.ui.slider.range input[type="range"]::-moz-range-thumb {
			background: #89B84C;
			border-color: #89B84C;
			border-radius: 50rem;
			height: 0.7em;
			width: 0.7em;
		}
		</style>
	</head>
	<body>

	<div class="ui slider range">
		<input type="range" />
	</div>

	</body>
</html>