<style>
.draggable {
-webkit-touch-callout:none;
-ms-touch-action:none; touch-action:none;
-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;
}
* {
box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;
}
.Slider {
display:block; position:relative;
width:200px; height:32px;
}
.Slider-Tray {
display:block; position:absolute;
left:14px; top:14px; width:168px; height:4px;
border:solid 1px black; border-radius:2px;
background:#CCCCCC;
}
.Slider-Knob {
display:block; position:absolute;
left:0px; top:0px; width:32px; height:32px;
border:solid 1px black; border-radius:50%;
background:linear-gradient(to bottom, #FFFFFF, #EEEEEE);
}
</style>
<script>
import { draggable } from 'svelte-agnostic-draggable'
/**** map all touch events to mouse events ****/