6 |

9 | active = v}> 10 | 11 | 12 |

13 | 14 | 15 | 16 | {#if range} 17 | active = v}> 18 | 19 | 20 |

21 | 22 | 23 | 24 | {/if} 25 |

26 | 27 | 78 | 79 | 110 | -------------------------------------------------------------------------------- /src/Thumb.svelte: -------------------------------------------------------------------------------- 1 |

((active = true), dispatch('active', true))} 6 | on:drag={({ detail: v }) => (pos = v)} 7 | on:dragend={() => ((active = false), dispatch('active', false))}> 8 |

9 | 10 |

11 |

12 | 13 | 20 | 21 | 52 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Slider.svelte'; 2 | -------------------------------------------------------------------------------- /src/slider.js: -------------------------------------------------------------------------------- 1 | export default function handle(node) { 2 | const onDown = getOnDown(node); 3 | 4 | node.addEventListener("touchstart", onDown); 5 | node.addEventListener("mousedown", onDown); 6 | return { 7 | destroy() { 8 | node.removeEventListener("touchstart", onDown); 9 | node.removeEventListener("mousedown", onDown); 10 | } 11 | }; 12 | } 13 | 14 | function getOnDown(node) { 15 | const onMove = getOnMove(node); 16 | 17 | return function (e) { 18 | e.preventDefault(); 19 | node.dispatchEvent(new CustomEvent("dragstart")); 20 | 21 | const moveevent = "touches" in e ? "touchmove" : "mousemove"; 22 | const upevent = "touches" in e ? "touchend" : "mouseup"; 23 | 24 | document.addEventListener(moveevent, onMove); 25 | document.addEventListener(upevent, onUp); 26 | 27 | function onUp(e) { 28 | e.stopPropagation(); 29 | 30 | document.removeEventListener(moveevent, onMove); 31 | document.removeEventListener(upevent, onUp); 32 | 33 | node.dispatchEvent(new CustomEvent("dragend")); 34 | }; 35 | }; 36 | } 37 | 38 | function getOnMove(node) { 39 | const track = node.parentNode; 40 | 41 | return function (e) { 42 | const { left, width } = track.getBoundingClientRect(); 43 | const clickOffset = "touches" in e ? e.touches[0].clientX : e.clientX; 44 | const clickPos = Math.min(Math.max((clickOffset - left) / width, 0), 1) || 0; 45 | node.dispatchEvent(new CustomEvent("drag", { detail: clickPos })); 46 | }; 47 | } --------------------------------------------------------------------------------