#669 first revision

src/components/Form/Form.types.ts

@@ -2,11 +2,12 @@ import type {
 	CheckboxGroupProps,
 	CheckboxProps,
 	ElProps,
-	RangeSliderProps,
 	FieldsetProps,
 	InputProps,
 	InputStates,
 	RadioGroupProps,
+	RangeSliderProps,
+	RangeSliderTarget,
 	SelectProps,
 } from '$lib/components'
 
@@ -30,7 +31,8 @@ export interface FormRadioGroupProps extends Partial<FormFieldProps>, Partial<Ra
 
 export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
 
-export interface FormRangeSliderProps extends Partial<FormFieldProps>, Partial<RangeSliderProps> {}
+export interface FormRangeSliderProps extends Partial<FormFieldProps>, Partial<RangeSliderProps> {
+	element?: RangeSliderTarget
+}
 
 export interface FormFieldsetProps extends Partial<FormFieldProps>, Partial<FieldsetProps> {}
-

src/components/Form/FormRangeSlider.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-	import { RangeSlider } from '$lib/components'
-
-	import { FormField, type FormRangeSliderProps } from '.'
+	import { FormField, type FormRangeSliderProps, RangeSlider } from '$lib/components'
 
 	type $$Props = FormRangeSliderProps
 
@@ -22,8 +20,6 @@
 
 <FormField {...$$restProps} {cssPrefix}>
 	<slot name="label" />
-	<RangeSlider {...rangeSliderProps} bind:value {options}>
-		<slot />
-	</RangeSlider>
+	<RangeSlider {...rangeSliderProps} bind:value />
 	<slot name="hint" />
 </FormField>

src/components/RangeSlider/RangeSlider.svelte

@@ -3,8 +3,7 @@
 
 	import noUiSlider from 'nouislider'
 
-	import { El } from '$lib/components'
-	import type { RangeSliderProps } from '$lib/components'
+	import { El, type RangeSliderProps, type RangeSliderTarget } from '$lib/components'
 
 	type $$Props = RangeSliderProps
 
@@ -13,6 +12,11 @@
 	 */
 	export let cssPrefix: $$Props['cssPrefix'] = 'range-slider'
 
+	/**
+	 * Target DOM element for RangeSlider
+	 */
+	export let element: $$Props['element'] = undefined
+
 	/**
 	 * the Value of RangeSlider
 	 */
@@ -23,39 +27,38 @@
 	 */
 	export let color: $$Props['color'] = undefined
 
-	/**
-	 * set the RangeSlider orientation
-	 */
-	export let orientation: $$Props['orientation'] = 'horizontal'
-
 	/**
 	 * set the RangeSlider options
 	 */
 	export let options: $$Props['options']
 
 	let cssProps: any = {}
 	let otherProps: any = {}
+
 	$: {
 		cssProps = {
 			color,
-			orientation,
+			orientation: options?.orientation ?? 'horizontal',
 		}
-		otherProps = {
-			cssPrefix,
-			options,
-			value,
+		otherProps = { cssPrefix }
+		if (element !== undefined && options !== undefined) {
+			element.noUiSlider?.updateOptions(options, true)
 		}
 	}
 
-	let element: HTMLElement
 	onMount(() => {
-		if (element !== undefined) {
+		if (element !== undefined && options !== undefined) {
 			noUiSlider.create(element, options)
 
-			element.noUiSlider.on('update', function (values: any, handle: any) {
+			element.noUiSlider?.on('update', (values: any, handle: any) => {
 				value = values
 			})
 		}
+		return () => {
+			if (element !== undefined) {
+				element.noUiSlider?.destroy()
+			}
+		}
 	})
 </script>
 

src/components/RangeSlider/RangeSlider.types.ts

@@ -1,12 +1,12 @@
-import type { Options } from 'nouislider'
+import type { Options as RangeSliderOptions, target as RangeSliderTarget } from 'nouislider'
 
 import type { ElProps } from '$lib/components'
 
-declare type Orientations = 'horizontal' | 'vertical'
+export type { RangeSliderOptions, RangeSliderTarget }
 
 export interface RangeSliderProps extends Partial<ElProps> {
 	color?: Colors
 	value?: any
-	options: Options
-	orientation?: Orientations
+	options?: RangeSliderOptions
+	element?: RangeSliderTarget
 }

src/routes/docs/components/range-sliders/RangeSliderColors.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { RangeSlider } from '@ubeac/svelte'
-	import type { Options } from 'nouislider'
+	import { RangeSlider, type RangeSliderOptions } from '@ubeac/svelte'
 
-	let optionsLower: Options = {
+	let optionsLower: RangeSliderOptions = {
 		range: {
 			min: 10,
 			max: 100,
@@ -12,11 +11,10 @@
 		direction: 'ltr',
 		behaviour: 'tap-drag',
 		tooltips: false,
-		orientation: 'horizontal',
 		connect: 'lower',
 	}
 
-	let optionsUpper: Options = {
+	let optionsUpper: RangeSliderOptions = {
 		range: {
 			min: 10,
 			max: 100,
@@ -26,7 +24,6 @@
 		direction: 'ltr',
 		behaviour: 'tap-drag',
 		tooltips: false,
-		orientation: 'horizontal',
 		connect: 'upper',
 	}
 	let value: any

src/routes/docs/components/range-sliders/RangeSliderDefault.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { El, RangeSlider } from '@ubeac/svelte'
-	import type { Options } from 'nouislider'
+	import { RangeSlider, type RangeSliderOptions } from '@ubeac/svelte'
 
 	let value1: any
 	let value2: any
@@ -14,7 +13,7 @@
 		},
 	}
 
-	let options1: Options = {
+	let options1: RangeSliderOptions = {
 		range: {
 			min: 10,
 			max: 100,
@@ -27,7 +26,7 @@
 		format: format,
 	}
 
-	let options2: Options = {
+	let options2: RangeSliderOptions = {
 		range: {
 			min: 10,
 			max: 100,
@@ -42,7 +41,7 @@
 </script>
 
 <RangeSlider color="primary" bind:value={value1} options={options1} />
-<El>Value: {value1}</El>
+<i>Value: {value1}</i>
 
 <RangeSlider options={options2} bind:value={value2} />
-<El>Values: {value2}</El>
+<i>Values: {value2}</i>

src/scss/tabler/components/_range-slider.scss

@@ -2,19 +2,13 @@
 // Range Slider
 //
 
-$orientations: 'horizontal' 'vertical';
-
 $props: (
     null: ('.form-range', '.noUi-target', '.noUi-txt-dir-ltr'),
     color: generate_props($theme_colors, ('.text-')),
+    orientation:('horizontal': ('.noUi-horizontal'),
+        'vertical': ('.noUi-vertical')),
 );
 
 .#{$prefix-range-slider} {
     @include apply-props($props);
-
-    @each $orientation in $orientations {
-        &-orientation-#{$orientation} {
-            @extend .noUi-#{$orientation};
-        }
-    }
 }