paperwave-range-slider
Version:
paperwave-range-slider allows users to select a sub-range by moving the slider knobs.
72 lines (61 loc) • 2.33 kB
HTML
<!--
@license
Copyright (c) 2019 Tim Horn. All rights reserved.
This code may only be used under the BSD-3-Clause license found at
https://opensource.org/licenses/BSD-3-Clause
author: Tim Horn
contact: https://paperwave.xyz
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>paperwave-range-slider demo</title>
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
import '@polymer/iron-demo-helpers/demo-snippet';
</script>
<script type="module" src="../paperwave-range-slider.js"></script>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic paperwave-range-slider demo</h3>
<demo-snippet>
<template>
<paperwave-range-slider></paperwave-range-slider>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>They can be editable, and styled using custom properties (including all of the paper-slide properties)</h3>
<demo-snippet>
<template>
<style is="custom-style">
paperwave-range-slider.knob-pin-colors {
--paper-slider-knob-color-min: var(--paper-green-500);
--paper-slider-knob-color-max: var(--paper-red-500);
--paper-slider-pin-color-min: var(--paper-green-500);
--paper-slider-pin-color-max: var(--paper-red-500);
}
paperwave-range-slider.paper-slider-properties {
--paper-slider-container-color: black;
--paper-slider-active-color: var(--paper-green-500);
}
</style>
<paperwave-range-slider class="knob-pin-colors paper-slider-properties"
low-value="20"
high-value="80"
min-interval=25
pin>
</paperwave-range-slider>
</template>
</demo-snippet>
</div>
</body>
</html>