mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(slider): listen to mouse/touch movement on document body

Browse source 
#288
This commit is contained in:
Eric Liu 2020-09-28 14:05:53 -07:00
commit 21c09ef3d8
1 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/Slider/Slider.svelte
View file

@ -1,9 +1,9 @@
<script> <script>
/** /**
* Specify the value of the slider * Specify the value of the slider
* @type {string} [value=""] * @type {number} [value=0]
*/ */
export let value = ""; export let value = 0;
/** /**
* Set the maximum slider value * Set the maximum slider value
@ -119,6 +119,13 @@
function stopHolding() { function stopHolding() {
holding = false; holding = false;
dragging = false;
}
function move() {
if (holding) {
startDragging();
}
} }
function calcValue(e) { function calcValue(e) {
@ -159,6 +166,13 @@
} }
</script> </script>
<svelte:body
on:mousemove="{move}"
on:touchmove="{move}"
on:mouseup="{stopHolding}"
on:touchend="{stopHolding}"
on:touchcancel="{stopHolding}" />
<div <div
class:bx--form-item="{true}" class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
@ -182,21 +196,15 @@
tabindex="-1" tabindex="-1"
class:bx--slider="{true}" class:bx--slider="{true}"
class:bx--slider--disabled="{disabled}" class:bx--slider--disabled="{disabled}"
on:click="{startDragging}" on:mousedown="{startDragging}"
on:mousemove="{() => { on:mousedown="{startHolding}"
if (holding) { on:touchstart="{startHolding}"
startDragging(); on:keydown="{({ shiftKey, key }) => {
const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
if (keys[key]) {
value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
} }
}}" }}"
on:touchmove="{() => {
if (holding) {
startDragging();
}
}}"
on:mouseup="{stopHolding}"
on:touchup="{stopHolding}"
on:touchend="{stopHolding}"
on:touchcancel="{stopHolding}"
> >
<div <div
role="slider" role="slider"
@ -206,14 +214,6 @@
aria-valuemax="{max}" aria-valuemax="{max}"
aria-valuemin="{min}" aria-valuemin="{min}"
aria-valuenow="{value}" aria-valuenow="{value}"
on:mousedown="{startHolding}"
on:touchstart="{startHolding}"
on:keydown="{({ shiftKey, key }) => {
const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
if (keys[key]) {
value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
}
}}"
id="{id}" id="{id}"
></div> ></div>
<div bind:this="{trackRef}" class:bx--slider__track="{true}"></div> <div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>