Skip to content

Commit

Permalink
Merge branch 'min-max-zero-#20' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeydotme
simeydotme committed Feb 5, 2021
2 parents 75fedca + 9d5b4d6 commit 894269e
Show file tree
Hide file tree
Showing 7 changed files with 712 additions and 564 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ prop | type | default | description
**rest** | `Boolean`/`String` | `false` | Whether to show a pip or label for the all other values. Use `rest='label'` to show a label value
**prefix** | `String` | `""` | A string to prefix to all displayed values
**suffix** | `String` | `""` | A string to suffix to all displayed values
**disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
**formatter** | `Function` | `(v) => v` | A function to re-format values before they are displayed
**handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property
**springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
Expand Down
493 changes: 273 additions & 220 deletions dist/svelte-range-slider-pips.js
View file

Large diffs are not rendered by default.

493 changes: 273 additions & 220 deletions dist/svelte-range-slider-pips.mjs
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "svelte-range-slider-pips",
"version": "1.6.1",
"version": "1.7.0",
"svelte": "src/index.js",
"module": "dist/svelte-range-slider-pips.mjs",
"main": "dist/svelte-range-slider-pips.js",
Expand Down
203 changes: 118 additions & 85 deletions src/RangeSlider.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
export let vertical = false;
export let float = false;
export let hover = true;
export let disabled = false;
// range pips / values props
export let pips = false;
Expand Down Expand Up @@ -50,21 +51,26 @@
// copy the initial values in to a spring function which
// will update every time the values array is modified
let springPositions = spring(
values.map((v) =>
parseFloat((((v - min) / (max - min)) * 100).toFixed(precision))
),
springValues
);
// check the values array, and trim it if needed (range)
// and clamp the values to the steps and boundaries set up in the slider
$: values = trimRange(values).map((v) => alignValueToStep(v));
// update the spring function so that movement can happen in the UI
let springPositions;
$: {
springPositions.set(values.map((v) => percentOf(v)));
}
// check that "values" is an array, or set it as array
// to prevent any errors in springs, or range trimming
if ( !Array.isArray( values ) ) {
values = [(max + min) / 2];
console.error( "'values' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)" );
}
// trim the range as needed
values = trimRange(values);
// clamp the values to the steps and boundaries set up in the slider
values = values.map((v) => alignValueToStep(v));
// update the spring function so that movement can happen in the UI
if ( springPositions ) {
springPositions.set(values.map((v) => percentOf(v)));
} else {
springPositions = spring( values.map((v) => percentOf(v)), springValues );
}
};
/**
* take in a value, and then calculate that value's percentage
Expand Down Expand Up @@ -167,7 +173,9 @@
/**
* trim the values array based on whether the property
* for 'range' is 'min', 'max', or truthy.
* for 'range' is 'min', 'max', or truthy. This is because we
* do not want more than one handle for a min/max range, and we do
* not want more than two handles for a true range.
* @param {array} values the input values for the rangeSlider
* @return {array} the range array for creating a rangeSlider
**/
Expand Down Expand Up @@ -352,8 +360,10 @@
* @param {event} e the event from browser
**/
function sliderFocusHandle(e) {
activeHandle = index(e.target);
focus = true;
if ( !disabled ) {
activeHandle = index(e.target);
focus = true;
}
}
/**
Expand All @@ -362,37 +372,39 @@
* @param {event} e the event from browser
**/
function sliderKeydown(e) {
const handle = index(e.target);
let jump = e.ctrlKey || e.metaKey || e.shiftKey ? step * 10 : step;
let prevent = false;
switch (e.key) {
case "PageDown":
jump *= 10;
case "ArrowRight":
case "ArrowUp":
moveHandle(handle, values[handle] + jump);
prevent = true;
break;
case "PageUp":
jump *= 10;
case "ArrowLeft":
case "ArrowDown":
moveHandle(handle, values[handle] - jump);
prevent = true;
break;
case "Home":
moveHandle(handle, min);
prevent = true;
break;
case "End":
moveHandle(handle, max);
prevent = true;
break;
}
if (prevent) {
e.preventDefault();
e.stopPropagation();
if ( !disabled ) {
const handle = index(e.target);
let jump = e.ctrlKey || e.metaKey || e.shiftKey ? step * 10 : step;
let prevent = false;
switch (e.key) {
case "PageDown":
jump *= 10;
case "ArrowRight":
case "ArrowUp":
moveHandle(handle, values[handle] + jump);
prevent = true;
break;
case "PageUp":
jump *= 10;
case "ArrowLeft":
case "ArrowDown":
moveHandle(handle, values[handle] - jump);
prevent = true;
break;
case "Home":
moveHandle(handle, min);
prevent = true;
break;
case "End":
moveHandle(handle, max);
prevent = true;
break;
}
if (prevent) {
e.preventDefault();
e.stopPropagation();
}
}
}
Expand All @@ -402,21 +414,23 @@
* @param {event} e the event from browser
**/
function sliderInteractStart(e) {
const clientPos = normalisedClient(e);
// set the closest handle as active
focus = true;
handleActivated = true;
handlePressed = true;
activeHandle = getClosestHandle(clientPos);
// fire the start event
startValue = previousValue = alignValueToStep(values[activeHandle]);
eStart();
// for touch devices we want the handle to instantly
// move to the position touched for more responsive feeling
if (e.type === "touchstart") {
handleInteract(clientPos);
if ( !disabled ) {
const clientPos = normalisedClient(e);
// set the closest handle as active
focus = true;
handleActivated = true;
handlePressed = true;
activeHandle = getClosestHandle(clientPos);
// fire the start event
startValue = previousValue = alignValueToStep(values[activeHandle]);
eStart();
// for touch devices we want the handle to instantly
// move to the position touched for more responsive feeling
if (e.type === "touchstart") {
handleInteract(clientPos);
}
}
}
Expand Down Expand Up @@ -451,8 +465,10 @@
* @param {event} e the event from browser
**/
function bodyInteract(e) {
if (handleActivated) {
handleInteract(normalisedClient(e));
if ( !disabled ) {
if (handleActivated) {
handleInteract(normalisedClient(e));
}
}
}
Expand All @@ -463,20 +479,22 @@
* @param {event} e the event from browser
**/
function bodyMouseUp(e) {
const el = e.target;
// this only works if a handle is active, which can
// only happen if there was sliderInteractStart triggered
// on the slider, already
if (handleActivated) {
if (el === slider || slider.contains(el)) {
focus = true;
if (!targetIsHandle(el)) {
handleInteract(normalisedClient(e));
if ( !disabled ) {
const el = e.target;
// this only works if a handle is active, which can
// only happen if there was sliderInteractStart triggered
// on the slider, already
if (handleActivated) {
if (el === slider || slider.contains(el)) {
focus = true;
if (!targetIsHandle(el)) {
handleInteract(normalisedClient(e));
}
}
// fire the stop event for mouse device
// when the body is triggered with an active handle
eStop();
}
// fire the stop event for mouse device
// when the body is triggered with an active handle
eStop();
}
handleActivated = false;
handlePressed = false;
Expand All @@ -493,21 +511,23 @@
}
function bodyKeyDown(e) {
if (e.target === slider || slider.contains(e.target)) {
keyboardActive = true;
if ( !disabled ) {
if (e.target === slider || slider.contains(e.target)) {
keyboardActive = true;
}
}
}
function eStart() {
dispatch("start", {
!disabled && dispatch("start", {
activeHandle,
value: startValue,
values: values.map((v) => alignValueToStep(v)),
});
}
function eStop() {
dispatch("stop", {
!disabled && dispatch("stop", {
activeHandle,
startValue: startValue,
value: values[activeHandle],
Expand All @@ -516,7 +536,7 @@
}
function eChange() {
dispatch("change", {
!disabled && dispatch("change", {
activeHandle,
startValue: startValue,
previousValue:
Expand Down Expand Up @@ -545,6 +565,7 @@
border-radius: 100px;
height: 0.5em;
margin: 1em;
transition: opacity 0.2s ease;
}
:global(.rangeSlider, .rangeSlider *) {
user-select: none;
Expand Down Expand Up @@ -695,13 +716,21 @@
background-color: #4a40d4;
background-color: var(--float);
}
:global(.rangeSlider.disabled ) {
opacity: 0.5;
}
:global(.rangeSlider.disabled .rangeNub) {
background-color: #d7dada;
background-color: var(--slider);
}
</style>

<div
{id}
bind:this={slider}
class="rangeSlider"
class:range
class:disabled
class:vertical
class:focus
class:min={range === 'min'}
Expand All @@ -716,9 +745,8 @@
{#each values as value, index}
<span
role="slider"
tabindex="0"
class="rangeHandle"
class:hoverable={hover}
class:hoverable={hover && !disabled}
class:active={focus && activeHandle === index}
class:press={handlePressed && activeHandle === index}
on:blur={sliderBlurHandle}
Expand All @@ -729,7 +757,11 @@
aria-valuemax={range === true && index === 0 ? values[1] : max}
aria-valuenow={value}
aria-valuetext="{prefix}{handleFormatter(value)}{suffix}"
aria-orientation={vertical ? 'vertical' : 'horizontal'}>
aria-orientation={vertical ? 'vertical' : 'horizontal'}
aria-disabled={disabled}
{disabled}
tabindex="{ disabled ? -1 : 0 }"
>
<span class="rangeNub" />
{#if float}
<span class="rangeFloat">{prefix}{handleFormatter(value)}{suffix}</span>
Expand Down Expand Up @@ -759,6 +791,7 @@
{suffix}
{formatter}
{focus}
{disabled}
{percentOf} />
{/if}
</div>
Expand Down
Loading

0 comments on commit 894269e

Please sign in to comment.