test/core-slider-index.html
<!DOCTYPE html>
<html>
<head>
<title>core-components</title>
<script src="../dist/core-slider.js"></script>
<style>
.test-core-slider section {
width: 400px;
padding: 10px;
margin: 10px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<core-slider></core-slider>
<div class="test-core-slider">
<section id="test-core-slider-default">
<label>Default</label>
<core-slider></core-slider>
<core-slider id="value10-2" value="10"></core-slider>
</section>
<section id="test-core-slider-step">
<label>Step</label>
<core-slider step="30"></core-slider>
</section>
<section id="test-core-slider-min">
<label>Min</label>
<core-slider value="80" min="10"></core-slider>
</section>
<section id="test-core-slider-max">
<label>Max</label>
<core-slider value="10" max="20"></core-slider>
</section>
<section id="test-core-slider-disabled">
<label>Disabled</label>
<core-slider value="50" disabled="true"></core-slider>
</section>
<section id="test-core-slider-init">
<label>Initialized</label>
<core-slider value="50"></core-slider>
<core-slider id="value0" value="0"></core-slider>
<core-slider id="value10" value="10"></core-slider>
<core-slider id="value20" value="20"></core-slider>
<core-slider id="value30" value="30"></core-slider>
<core-slider id="value40" value="40"></core-slider>
<core-slider id="value50" value="50"></core-slider>
<core-slider id="value60" value="60"></core-slider>
<core-slider id="value70" value="70"></core-slider>
<core-slider id="value80" value="80"></core-slider>
<core-slider id="value90" value="90"></core-slider>
<core-slider id="value100" value="100"></core-slider>
</section>
</div>
</body>
</html>