Skip to content

Commit 556c4b8

Browse files
simeydotmesimeydotme
committed
Squashed commit of the following:
commit 933c6b339604a7cf1ac9d45bd37c2cbdc5cee035 Author: simeydotme <[email protected]> Date: Sat Jul 24 18:30:03 2021 +0800 Add second argument for formatter functions resolves #23 I modifed the arguments for the formatter functions, they both now accept the original `(v)` value which means it should be backwards compatible. But there is also an additional `(i)` argument which holds the index of the handle/pip respectively depending if formatting a handle or a pip. commit c9437a0a479521bc27fa9fd388ffe64830476eb6 Author: simeydotme <[email protected]> Date: Sat Jul 24 17:33:57 2021 +0800 Add styling wrappers for `prefix` and `suffix` resolves #27 This commit adds a `<span>` wrapper around each prefix and suffix, allowing finer control over the aesthetics of the pips, and floats.
1 parent 23f5b9d commit 556c4b8

File tree

6 files changed

+73
-36
lines changed

6 files changed

+73
-36
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@ prop | type | default | description
111111
**prefix** | `String` | `""` | A string to prefix to all displayed values
112112
**suffix** | `String` | `""` | A string to suffix to all displayed values
113113
**disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
114-
**formatter** | `Function` | `(v) => v` | A function to re-format values before they are displayed
115-
**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
114+
**formatter** | `Function` | `(v,i) => v` | A function to re-format values before they are displayed (`v = value, i = pip index`)
115+
**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 (`v = value, i = handle index`)
116116
**springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
117117

118118
### slider events (dispatched)

‎src/RangePips.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
// formatting props
1919
export let prefix = "";
2020
export let suffix = "";
21-
export let formatter = v => v;
21+
export let formatter = (v,i) => v;
2222
2323
// stylistic props
2424
export let focus = undefined;
@@ -145,7 +145,7 @@
145145
style="{vertical ? 'top' : 'left'}: 0%;">
146146
{#if all === 'label' || first === 'label'}
147147
<span class="pipVal">
148-
{prefix}{formatter(min)}{suffix}
148+
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
149149
</span>
150150
{/if}
151151
</span>
@@ -160,7 +160,7 @@
160160
style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;">
161161
{#if all === 'label' || rest === 'label'}
162162
<span class="pipVal">
163-
{prefix}{formatter(pipVal(i))}{suffix}
163+
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
164164
</span>
165165
{/if}
166166
</span>
@@ -175,7 +175,7 @@
175175
style="{vertical ? 'top' : 'left'}: 100%;">
176176
{#if all === 'label' || last === 'label'}
177177
<span class="pipVal">
178-
{prefix}{formatter(max)}{suffix}
178+
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
179179
</span>
180180
{/if}
181181
</span>

‎src/RangeSlider.svelte‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
export let id = undefined;
2828
export let prefix = "";
2929
export let suffix = "";
30-
export let formatter = (v) => v;
30+
export let formatter = (v,i) => v;
3131
export let handleFormatter = formatter;
3232
3333
// stylistic props
@@ -750,22 +750,25 @@
750750
class:hoverable={hover && !disabled}
751751
class:active={focus && activeHandle === index}
752752
class:press={handlePressed && activeHandle === index}
753+
data-handle={index}
753754
on:blur={sliderBlurHandle}
754755
on:focus={sliderFocusHandle}
755756
on:keydown={sliderKeydown}
756757
style="{vertical ? 'top' : 'left'}: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2};"
757758
aria-valuemin={range === true && index === 1 ? values[0] : min}
758759
aria-valuemax={range === true && index === 0 ? values[1] : max}
759760
aria-valuenow={value}
760-
aria-valuetext="{prefix}{handleFormatter(value)}{suffix}"
761+
aria-valuetext="{prefix}{handleFormatter(value,index)}{suffix}"
761762
aria-orientation={vertical ? 'vertical' : 'horizontal'}
762763
aria-disabled={disabled}
763764
{disabled}
764765
tabindex="{ disabled ? -1 : 0 }"
765766
>
766767
<span class="rangeNub" />
767768
{#if float}
768-
<span class="rangeFloat">{prefix}{handleFormatter(value)}{suffix}</span>
769+
<span class="rangeFloat">
770+
{#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{handleFormatter(value,index)}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
771+
</span>
769772
{/if}
770773
</span>
771774
{/each}

‎test/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<link rel='icon' type='image/png' href='/favicon.png'>
1010
<link rel='stylesheet' href='/global.css'>
11+
<link rel='stylesheet' href='/testing.css'>
1112
<link rel='stylesheet' href='/build/bundle.css'>
1213

1314
<script defer src='/build/bundle.js'></script>

‎test/public/testing.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
2+
3+
body,html {
4+
padding: 0;
5+
margin: 0;
6+
}
7+
main {
8+
font-family: sans-serif;
9+
text-align: center;
10+
padding: 15px;
11+
}
12+
@media screen and ( min-width: 600px ) {
13+
main {
14+
padding: 50px;
15+
}
16+
}
17+
input {
18+
width: 100px;
19+
}
20+
21+
.rangeSlider.rangeSlider {
22+
margin: 60px;
23+
}
24+
25+
h2,h3,h4 {
26+
margin: 20px 0 10px;
27+
}
28+
29+
h2 + .rangeSlider.rangeSlider, h3 + .rangeSlider.rangeSlider, h4 + .rangeSlider.rangeSlider {
30+
margin-top: 10px;
31+
}
32+
33+
.pipVal-prefix {
34+
color: coral;
35+
}
36+
37+
.pipVal-suffix {
38+
color: blueviolet;
39+
}

‎test/src/App.svelte‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,12 @@
3939
--range-handle-inactive: var(--range-slider);
4040
--range-handle-focus: rgb(245, 0, 46);
4141
}
42+
#test-id [data-handle="1"] {
43+
--handle: turquoise;
44+
--handle-inactive: #a0ffe0;
45+
--handle-border: #a0ffe0;
46+
--handle-focus: var(--handle);
47+
}
4248
#clr-test {
4349
--range-slider: rgb(195, 228, 222);
4450
--range-handle-inactive: rgb(81, 185, 180);
@@ -62,7 +68,8 @@
6268
<RangeSlider vertical range="max" values={[30]} pips />
6369

6470
<br>
65-
<RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} />
71+
<h2>Spring & Colors Test</h2>
72+
<RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} values={[30,50,70]} />
6673
<br>
6774

6875
<RangeSlider bind:values {disabled}
@@ -87,9 +94,14 @@
8794
on:change={(e) => { console.log("change",e.detail)}}
8895
/>
8996
<br>
97+
<h2>range</h2>
98+
<h3>Handles block each other</h3>
9099
<RangeSlider range bind:values={pushy} float />
100+
<h3>Handles push each other</h3>
91101
<RangeSlider range pushy bind:values={pushy} pips all="label" float />
102+
<h2>min range</h2>
92103
<RangeSlider range="min" values={[65]} pips all="label" float />
104+
<h2>max range</h2>
93105
<RangeSlider range="max" values={[35]} pips all="label" float />
94106
<br>
95107
<RangeSlider float pips step={10} pipstep={1} />
@@ -101,9 +113,14 @@
101113
/>
102114
<br>
103115
<RangeSlider float pips first="label" last="label" rest pipstep={1} bind:values={dynamic} range />
116+
117+
<h2>Prefix</h2>
104118
<RangeSlider prefix="$" range values={[20,80]} float pips first="label" last="label" />
105-
<RangeSlider id="clr-test" prefix="~" suffix="m²" {formatter} range values={[100,3000]} min={100} max={3000} step={50} float pips first="label" last="label" />
106-
<RangeSlider handleFormatter={()=>"O²"} formatter={(v)=>`${v}% O²`} step={1} float pips first="label" last="label" hover={false} />
119+
<h2>Prefix & Suffix, color</h2>
120+
<RangeSlider id="clr-test" prefix="~" suffix="m²" {formatter} range values={[100,3000]} min={100} max={3000} step={200} float pips all="label" />
121+
<h2>Formatters</h2>
122+
<RangeSlider handleFormatter={(v,i)=>"O²"} formatter={(v,i)=>`${v}% O²`} step={1} float pips first="label" last="label" hover={false} values={[25,50,75]} />
123+
<RangeSlider handleFormatter={(v,i)=>`v: ${v}, i: ${i}`} formatter={(v,i)=>`v: ${v}, i: ${i}`} step={10} float pips all="label" values={[25,50,75]} />
107124
<br>
108125
<RangeSlider bind:values={day} min={0} max={6} formatter={dayFormat} float pips first="label" last="label" rest="label" />
109126
<RangeSlider bind:values={day} min={0} max={6} formatter={dayFormatCn} float pips first="label" last="label" rest="label" />
@@ -121,7 +138,7 @@
121138
<br><br>
122139

123140
<RangeSlider bind:values={zero} min={zeromin} max={zeromax} range float pips all="label" step={1} pipstep={5} />
124-
<br><button on:click={()=>{ zeromin = 1; zeromax = 30; zero = 10; }}>increase min/max</button> - {zero}
141+
<br><button on:click={()=>{ zeromin = 10; zeromax = 30; zero = [3,70]; }}>increase min/max</button> - {zero}
125142

126143
<RangeSlider bind:values float pips all="label" {disabled} />
127144
<button on:click={()=>{disabled=!disabled}}>toggle disabled</button>
@@ -130,26 +147,3 @@
130147

131148

132149
</main>
133-
134-
<style>
135-
:global(body,html) {
136-
padding: 0;
137-
margin: 0;
138-
}
139-
main {
140-
font-family: sans-serif;
141-
text-align: center;
142-
padding: 15px;
143-
}
144-
@media screen and ( min-width: 600px ) {
145-
main {
146-
padding: 50px;
147-
}
148-
}
149-
input {
150-
width: 100px;
151-
}
152-
:global(.rangeSlider ) {
153-
margin: 60px!important;
154-
}
155-
</style>

0 commit comments

Comments
 (0)