|
1 | 1 | /** |
2 | | - * svelte-range-slider-pips ~ 1.7.0 |
| 2 | + * svelte-range-slider-pips ~ 1.7.2 |
3 | 3 | * Multi-Thumb, Accessible, Beautiful Range Slider with Pips |
4 | | - * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 6/2/2021 |
| 4 | + * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 1/7/2021 |
5 | 5 | */ |
6 | 6 | (function (global, factory) { |
7 | 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : |
|
534 | 534 |
|
535 | 535 | function add_css() { |
536 | 536 | var style = element("style"); |
537 | | - style.id = "svelte-64s77i-style"; |
538 | | - style.textContent = ".rangeSlider{--pip:var(--range-pip, lightslategray);--pip-text:var(--range-pip-text, var(--pip));--pip-active:var(--range-pip-active, darkslategrey);--pip-active-text:var(--range-pip-active-text, var(--pip-active));--pip-in-range:var(--range-pip-in-range, var(--pip-active));--pip-in-range-text:var(--range-pip-in-range-text, var(--pip-active-text))}.rangePips{position:absolute;height:1em;left:0;right:0;bottom:-1em}.rangePips.vertical{height:auto;width:1em;left:100%;right:auto;top:0;bottom:0}.rangePips .pip{height:0.4em;position:absolute;top:0.25em;width:1px;white-space:nowrap}.rangePips.vertical .pip{height:1px;width:0.4em;top:0;left:0.25em}.rangePips .pip.selected{height:0.75em}.rangePips.vertical .pip.selected{height:1px;width:0.75em}.rangePips .pipVal{position:absolute;top:0.4em;transform:translate(-50%, 25%)}.rangePips.vertical .pipVal{position:absolute;top:0;left:0.4em;transform:translate(25%, -50%)}.rangePips .pip.selected .pipVal{font-weight:bold;top:0.75em}.rangePips.vertical .pip.selected .pipVal{top:0;left:0.75em}.rangePips .pip, .rangePips .pipVal{transition:all 0.15s ease}.rangePips .pip{color:lightslategray;color:var(--pip-text);background-color:lightslategray;background-color:var(--pip)}.rangePips .pip.selected{color:darkslategrey;color:var(--pip-active-text);background-color:darkslategrey;background-color:var(--pip-active)}.rangePips .pip.in-range{color:darkslategrey;color:var(--pip-in-range-text);background-color:darkslategrey;background-color:var(--pip-in-range)}"; |
| 537 | + style.id = "svelte-twxhse-style"; |
| 538 | + style.textContent = ".rangeSlider{--pip:var(--range-pip, lightslategray);--pip-text:var(--range-pip-text, var(--pip));--pip-active:var(--range-pip-active, darkslategrey);--pip-active-text:var(--range-pip-active-text, var(--pip-active));--pip-in-range:var(--range-pip-in-range, var(--pip-active));--pip-in-range-text:var(--range-pip-in-range-text, var(--pip-active-text))}.rangePips{position:absolute;height:1em;left:0;right:0;bottom:-1em}.rangePips.vertical{height:auto;width:1em;left:100%;right:auto;top:0;bottom:0}.rangePips .pip{height:0.4em;position:absolute;top:0.25em;width:1px;white-space:nowrap}.rangePips.vertical .pip{height:1px;width:0.4em;top:0;left:0.25em}.rangePips .pip.selected{height:0.75em}.rangePips.vertical .pip.selected{height:1px;width:0.75em}.rangePips .pipVal{position:absolute;top:0.4em;transform:translate(-50%, 25%)}.rangePips.vertical .pipVal{position:absolute;top:0;left:0.4em;transform:translate(25%, -50%)}.rangePips .pip.selected .pipVal{font-weight:bold;top:0.75em}.rangePips.vertical .pip.selected .pipVal{top:0;left:0.75em}.rangePips .pip{transition:all 0.15s ease}.rangePips .pipVal{transition:all 0.15s ease}.rangePips .pip{color:lightslategray;color:var(--pip-text);background-color:lightslategray;background-color:var(--pip)}.rangePips .pip.selected{color:darkslategrey;color:var(--pip-active-text);background-color:darkslategrey;background-color:var(--pip-active)}.rangePips .pip.in-range{color:darkslategrey;color:var(--pip-in-range-text);background-color:darkslategrey;background-color:var(--pip-in-range)}"; |
539 | 539 | append(document.head, style); |
540 | 540 | } |
541 | 541 |
|
|
546 | 546 | return child_ctx; |
547 | 547 | } |
548 | 548 |
|
549 | | - // (137:2) {#if ( all && first !== false ) || first } |
| 549 | + // (140:2) {#if ( all && first !== false ) || first } |
550 | 550 | function create_if_block_5(ctx) { |
551 | 551 | let span; |
552 | 552 | let span_style_value; |
|
598 | 598 | }; |
599 | 599 | } |
600 | 600 |
|
601 | | - // (143:6) {#if all === 'label' || first === 'label'} |
| 601 | + // (146:6) {#if all === 'label' || first === 'label'} |
602 | 602 | function create_if_block_6(ctx) { |
603 | 603 | let span; |
604 | 604 | let t0; |
|
631 | 631 | }; |
632 | 632 | } |
633 | 633 |
|
634 | | - // (150:2) {#if ( all && rest !== false ) || rest} |
| 634 | + // (153:2) {#if ( all && rest !== false ) || rest} |
635 | 635 | function create_if_block_2(ctx) { |
636 | 636 | let each_1_anchor; |
637 | 637 | let each_value = Array(/*pipCount*/ ctx[12] + 1); |
|
687 | 687 | }; |
688 | 688 | } |
689 | 689 |
|
690 | | - // (152:6) {#if pipVal(i) !== min && pipVal(i) !== max} |
| 690 | + // (155:6) {#if pipVal(i) !== min && pipVal(i) !== max} |
691 | 691 | function create_if_block_3(ctx) { |
692 | 692 | let span; |
693 | 693 | let t; |
|
742 | 742 | }; |
743 | 743 | } |
744 | 744 |
|
745 | | - // (158:10) {#if all === 'label' || rest === 'label'} |
| 745 | + // (161:10) {#if all === 'label' || rest === 'label'} |
746 | 746 | function create_if_block_4(ctx) { |
747 | 747 | let span; |
748 | 748 | let t0; |
|
775 | 775 | }; |
776 | 776 | } |
777 | 777 |
|
778 | | - // (151:4) {#each Array(pipCount + 1) as _, i} |
| 778 | + // (154:4) {#each Array(pipCount + 1) as _, i} |
779 | 779 | function create_each_block(ctx) { |
780 | 780 | let show_if = /*pipVal*/ ctx[13](/*i*/ ctx[23]) !== /*min*/ ctx[0] && /*pipVal*/ ctx[13](/*i*/ ctx[23]) !== /*max*/ ctx[1]; |
781 | 781 | let if_block_anchor; |
|
813 | 813 | }; |
814 | 814 | } |
815 | 815 |
|
816 | | - // (167:2) {#if ( all && last !== false ) || last} |
| 816 | + // (170:2) {#if ( all && last !== false ) || last} |
817 | 817 | function create_if_block(ctx) { |
818 | 818 | let span; |
819 | 819 | let span_style_value; |
|
865 | 865 | }; |
866 | 866 | } |
867 | 867 |
|
868 | | - // (173:6) {#if all === 'label' || last === 'label'} |
| 868 | + // (176:6) {#if all === 'label' || last === 'label'} |
869 | 869 | function create_if_block_1(ctx) { |
870 | 870 | let span; |
871 | 871 | let t0; |
|
1091 | 1091 | class RangePips extends SvelteComponent { |
1092 | 1092 | constructor(options) { |
1093 | 1093 | super(); |
1094 | | - if (!document.getElementById("svelte-64s77i-style")) add_css(); |
| 1094 | + if (!document.getElementById("svelte-twxhse-style")) add_css(); |
1095 | 1095 |
|
1096 | 1096 | init(this, options, instance, create_fragment, safe_not_equal, { |
1097 | 1097 | range: 16, |
|
1118 | 1118 |
|
1119 | 1119 | function add_css$1() { |
1120 | 1120 | var style = element("style"); |
1121 | | - style.id = "svelte-5451cf-style"; |
1122 | | - style.textContent = ".rangeSlider{--slider:var(--range-slider, #d7dada);--handle-inactive:var(--range-handle-inactive, #99a2a2);--handle:var(--range-handle, #838de7);--handle-focus:var(--range-handle-focus, #4a40d4);--handle-border:var(--range-handle-border, var(--handle));--range-inactive:var(--range-range-inactive, var(--handle-inactive));--range:var(--range-range, var(--handle-focus));--float-inactive:var(--range-float-inactive, var(--handle-inactive));--float:var(--range-float, var(--handle-focus));--float-text:var(--range-float-text, white)}.rangeSlider{position:relative;border-radius:100px;height:0.5em;margin:1em;transition:opacity 0.2s ease}.rangeSlider, .rangeSlider *{user-select:none}.rangeSlider.pips{margin-bottom:1.8em}.rangeSlider.pip-labels{margin-bottom:2.8em}.rangeSlider.vertical{display:inline-block;border-radius:100px;width:0.5em;min-height:200px}.rangeSlider.vertical.pips{margin-right:1.8em;margin-bottom:1em}.rangeSlider.vertical.pip-labels{margin-right:2.8em;margin-bottom:1em}.rangeSlider .rangeHandle{position:absolute;display:block;height:1.4em;width:1.4em;top:0.25em;left:0.25em;transform:translateY(-50%) translateX(-50%);z-index:2}.rangeSlider .rangeNub,.rangeSlider .rangeHandle:before{position:absolute;left:0;top:0;display:block;border-radius:10em;height:100%;width:100%;transition:all 0.2s ease}.rangeSlider .rangeHandle:before{content:\"\";left:1px;top:1px;bottom:1px;right:1px;height:auto;width:auto;box-shadow:0 0 0 0px var(--handle-border);opacity:0}.rangeSlider .rangeHandle.hoverable:hover:before{box-shadow:0 0 0 8px var(--handle-border);opacity:0.2}.rangeSlider .rangeHandle.hoverable.press:before,.rangeSlider .rangeHandle.hoverable.press:hover:before{box-shadow:0 0 0 12px var(--handle-border);opacity:0.4}.rangeSlider.range:not(.min):not(.max) .rangeNub{border-radius:10em 10em 10em 1.6em}.rangeSlider.range .rangeHandle:nth-of-type(1) .rangeNub{transform:rotate(-135deg)}.rangeSlider.range .rangeHandle:nth-of-type(2) .rangeNub{transform:rotate(45deg)}.rangeSlider.range.vertical .rangeHandle:nth-of-type(1) .rangeNub{transform:rotate(-45deg)}.rangeSlider.range.vertical .rangeHandle:nth-of-type(2) .rangeNub{transform:rotate(135deg)}.rangeSlider .rangeFloat{display:block;position:absolute;left:50%;top:-0.5em;transform:translate(-50%, -100%);font-size:1em;text-align:center;opacity:0;pointer-events:none;white-space:nowrap;transition:all 0.2s ease;font-size:0.9em;padding:0.2em 0.4em;border-radius:0.2em}.rangeSlider .rangeHandle.active .rangeFloat,.rangeSlider .rangeHandle.hoverable:hover .rangeFloat{opacity:1;top:-0.2em;transform:translate(-50%, -100%)}.rangeSlider .rangeBar{position:absolute;display:block;transition:background 0.2s ease;border-radius:1em;height:0.5em;top:0;user-select:none;z-index:1}.rangeSlider.vertical .rangeBar{width:0.5em;height:auto}.rangeSlider{background-color:#d7dada;background-color:var(--slider)}.rangeSlider .rangeBar{background-color:#99a2a2;background-color:var(--range-inactive)}.rangeSlider.focus .rangeBar{background-color:#838de7;background-color:var(--range)}.rangeSlider .rangeNub{background-color:#99a2a2;background-color:var(--handle-inactive)}.rangeSlider.focus .rangeNub{background-color:#838de7;background-color:var(--handle)}.rangeSlider .rangeHandle.active .rangeNub{background-color:#4a40d4;background-color:var(--handle-focus)}.rangeSlider .rangeFloat{color:white;color:var(--float-text);background-color:#99a2a2;background-color:var(--float-inactive)}.rangeSlider.focus .rangeFloat{background-color:#4a40d4;background-color:var(--float)}.rangeSlider.disabled {opacity:0.5}.rangeSlider.disabled .rangeNub{background-color:#d7dada;background-color:var(--slider)}"; |
| 1121 | + style.id = "svelte-10nh6dg-style"; |
| 1122 | + style.textContent = ".rangeSlider{--slider:var(--range-slider, #d7dada);--handle-inactive:var(--range-handle-inactive, #99a2a2);--handle:var(--range-handle, #838de7);--handle-focus:var(--range-handle-focus, #4a40d4);--handle-border:var(--range-handle-border, var(--handle));--range-inactive:var(--range-range-inactive, var(--handle-inactive));--range:var(--range-range, var(--handle-focus));--float-inactive:var(--range-float-inactive, var(--handle-inactive));--float:var(--range-float, var(--handle-focus));--float-text:var(--range-float-text, white)}.rangeSlider{position:relative;border-radius:100px;height:0.5em;margin:1em;transition:opacity 0.2s ease;user-select:none}.rangeSlider *{user-select:none}.rangeSlider.pips{margin-bottom:1.8em}.rangeSlider.pip-labels{margin-bottom:2.8em}.rangeSlider.vertical{display:inline-block;border-radius:100px;width:0.5em;min-height:200px}.rangeSlider.vertical.pips{margin-right:1.8em;margin-bottom:1em}.rangeSlider.vertical.pip-labels{margin-right:2.8em;margin-bottom:1em}.rangeSlider .rangeHandle{position:absolute;display:block;height:1.4em;width:1.4em;top:0.25em;left:0.25em;transform:translateY(-50%) translateX(-50%);z-index:2}.rangeSlider .rangeNub,.rangeSlider .rangeHandle:before{position:absolute;left:0;top:0;display:block;border-radius:10em;height:100%;width:100%;transition:all 0.2s ease}.rangeSlider .rangeHandle:before{content:\"\";left:1px;top:1px;bottom:1px;right:1px;height:auto;width:auto;box-shadow:0 0 0 0px var(--handle-border);opacity:0}.rangeSlider .rangeHandle.hoverable:hover:before{box-shadow:0 0 0 8px var(--handle-border);opacity:0.2}.rangeSlider .rangeHandle.hoverable.press:before,.rangeSlider .rangeHandle.hoverable.press:hover:before{box-shadow:0 0 0 12px var(--handle-border);opacity:0.4}.rangeSlider.range:not(.min):not(.max) .rangeNub{border-radius:10em 10em 10em 1.6em}.rangeSlider.range .rangeHandle:nth-of-type(1) .rangeNub{transform:rotate(-135deg)}.rangeSlider.range .rangeHandle:nth-of-type(2) .rangeNub{transform:rotate(45deg)}.rangeSlider.range.vertical .rangeHandle:nth-of-type(1) .rangeNub{transform:rotate(-45deg)}.rangeSlider.range.vertical .rangeHandle:nth-of-type(2) .rangeNub{transform:rotate(135deg)}.rangeSlider .rangeFloat{display:block;position:absolute;left:50%;top:-0.5em;transform:translate(-50%, -100%);font-size:1em;text-align:center;opacity:0;pointer-events:none;white-space:nowrap;transition:all 0.2s ease;font-size:0.9em;padding:0.2em 0.4em;border-radius:0.2em}.rangeSlider .rangeHandle.active .rangeFloat,.rangeSlider .rangeHandle.hoverable:hover .rangeFloat{opacity:1;top:-0.2em;transform:translate(-50%, -100%)}.rangeSlider .rangeBar{position:absolute;display:block;transition:background 0.2s ease;border-radius:1em;height:0.5em;top:0;user-select:none;z-index:1}.rangeSlider.vertical .rangeBar{width:0.5em;height:auto}.rangeSlider{background-color:#d7dada;background-color:var(--slider)}.rangeSlider .rangeBar{background-color:#99a2a2;background-color:var(--range-inactive)}.rangeSlider.focus .rangeBar{background-color:#838de7;background-color:var(--range)}.rangeSlider .rangeNub{background-color:#99a2a2;background-color:var(--handle-inactive)}.rangeSlider.focus .rangeNub{background-color:#838de7;background-color:var(--handle)}.rangeSlider .rangeHandle.active .rangeNub{background-color:#4a40d4;background-color:var(--handle-focus)}.rangeSlider .rangeFloat{color:white;color:var(--float-text);background-color:#99a2a2;background-color:var(--float-inactive)}.rangeSlider.focus .rangeFloat{background-color:#4a40d4;background-color:var(--float)}.rangeSlider.disabled {opacity:0.5}.rangeSlider.disabled .rangeNub{background-color:#d7dada;background-color:var(--slider)}"; |
1123 | 1123 | append(document.head, style); |
1124 | 1124 | } |
1125 | 1125 |
|
|
1130 | 1130 | return child_ctx; |
1131 | 1131 | } |
1132 | 1132 |
|
1133 | | - // (766:6) {#if float} |
| 1133 | + // (767:6) {#if float} |
1134 | 1134 | function create_if_block_2$1(ctx) { |
1135 | 1135 | let span; |
1136 | 1136 | let t0; |
|
1163 | 1163 | }; |
1164 | 1164 | } |
1165 | 1165 |
|
1166 | | - // (745:2) {#each values as value, index} |
| 1166 | + // (746:2) {#each values as value, index} |
1167 | 1167 | function create_each_block$1(ctx) { |
1168 | 1168 | let span1; |
1169 | 1169 | let span0; |
|
1299 | 1299 | }; |
1300 | 1300 | } |
1301 | 1301 |
|
1302 | | - // (771:2) {#if range} |
| 1302 | + // (772:2) {#if range} |
1303 | 1303 | function create_if_block_1$1(ctx) { |
1304 | 1304 | let span; |
1305 | 1305 | let span_style_value; |
|
1324 | 1324 | }; |
1325 | 1325 | } |
1326 | 1326 |
|
1327 | | - // (777:2) {#if pips} |
| 1327 | + // (778:2) {#if pips} |
1328 | 1328 | function create_if_block$1(ctx) { |
1329 | 1329 | let rangepips; |
1330 | 1330 | let current; |
|
2248 | 2248 | class RangeSlider extends SvelteComponent { |
2249 | 2249 | constructor(options) { |
2250 | 2250 | super(); |
2251 | | - if (!document.getElementById("svelte-5451cf-style")) add_css$1(); |
| 2251 | + if (!document.getElementById("svelte-10nh6dg-style")) add_css$1(); |
2252 | 2252 |
|
2253 | 2253 | init( |
2254 | 2254 | this, |
|
0 commit comments