9276690d60
* initial commit federation * more federation * more federation * more federation * completes follow, accept, undo * add trail create activity * process trail create activity * more trail create activity * adds missing endpoints * adds update and delete activity * adds comment activities * adds activities back * adds summit logs activities * deletes follow counts table * fixes migrations * fixes migrations * fixes migrations * fixes migrations * adds remote profiles * ctd * ctd * we are getting closer... * adds public summit logs * fixes federated trails in lists * adds remote lists * adds list activites * fixes lists * adds notifications * adds iri redirect * fixes comments and summitlogs * fixes follows and profiles * adds asynchronous send * fixes list search * adds encryption key * bug fixes * fixes activity signing * removes custon activity object types * adds html editor * fixes html editor * fixes display issues on mastodon * adds federated sharing * finishes announcements * fixes small summit log issues * adds trail likes * finalizes likes * fixes images for komoot * add disable federation option * adds private profiles * updates docs * adds federated comments * adds trail and comments actvitiypub routes * adds mentions to editor * adds mentions to trails, comments, summit logs * updates theme * updates theme * update docs * update docs * updates docs * fixes various frontend problems * fixes activitypub follows api * updates docs * updates docs --------- Co-authored-by: Christian Beutel <>
79 lines
1.8 KiB
Svelte
79 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import noUiSlider from "nouislider";
|
|
import "nouislider/dist/nouislider.css";
|
|
import { onMount } from "svelte";
|
|
import { type Options as SliderOptions } from "nouislider";
|
|
|
|
interface Props {
|
|
minValue?: number;
|
|
maxValue?: number;
|
|
currentValue?: any;
|
|
onset?: (value: number) => void;
|
|
}
|
|
|
|
let {
|
|
minValue = 0,
|
|
maxValue = 100,
|
|
currentValue = $bindable(maxValue / 2),
|
|
onset,
|
|
...sliderOptions
|
|
}: Props & Partial<SliderOptions> = $props();
|
|
|
|
let sliderContainer: any = $state();
|
|
|
|
onMount(() => {
|
|
const updateValues = (values: string[]) => {
|
|
currentValue = parseFloat(values[0]);
|
|
};
|
|
|
|
noUiSlider.create(sliderContainer, {
|
|
start: currentValue,
|
|
connect: [true, false],
|
|
...sliderOptions,
|
|
range: {
|
|
min: minValue,
|
|
max: maxValue,
|
|
},
|
|
});
|
|
|
|
sliderContainer.noUiSlider.on("update", updateValues);
|
|
|
|
sliderContainer.noUiSlider.on("set", () => {
|
|
onset?.(currentValue);
|
|
});
|
|
});
|
|
|
|
export function set(value: number) {
|
|
sliderContainer.noUiSlider.set(value);
|
|
}
|
|
</script>
|
|
|
|
<div class="my-4" id="slider" bind:this={sliderContainer}></div>
|
|
|
|
<style lang="postcss">
|
|
@reference "tailwindcss";
|
|
@reference "../../../css/app.css";
|
|
|
|
:global(.noUi-target) {
|
|
@apply border border-input-border shadow-none;
|
|
}
|
|
:global(.noUi-horizontal) {
|
|
height: 6px;
|
|
}
|
|
:global(.noUi-connect) {
|
|
@apply bg-primary;
|
|
}
|
|
|
|
:global(.noUi-horizontal .noUi-handle) {
|
|
@apply rounded-full w-7 h-7 -top-3;
|
|
}
|
|
|
|
:global(.noUi-handle::before) {
|
|
@apply content-none;
|
|
}
|
|
|
|
:global(.noUi-handle::after) {
|
|
@apply content-none;
|
|
}
|
|
</style>
|