added FormRangeSlider component

src/components/Form/Form.types.ts

@@ -1,4 +1,13 @@
-import type { CheckboxGroupProps, CheckboxProps, ElProps, InputProps, InputStates, RadioGroupProps, SelectProps } from '$lib/components'
+import type {
+	CheckboxGroupProps,
+	CheckboxProps,
+	ElProps,
+	InputProps,
+	InputStates,
+	RadioGroupProps,
+	RangeSliderProps,
+	SelectProps,
+} from '$lib/components'
 
 export interface FormFieldProps extends Partial<ElProps> {
 	label?: string
@@ -18,4 +27,6 @@ export interface FormTextAreaProps extends Partial<FormInputProps> {
 
 export interface FormRadioGroupProps extends Partial<FormFieldProps>, Partial<RadioGroupProps> {}
 
-export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
+export interface FormSelectProps extends Partial<FormFieldProps>, Partial<SelectProps> {}
+
+export interface FormRangeSliderProps extends Partial<FormFieldProps>, Partial<RangeSliderProps> {}

src/components/Form/FormRangeSlider.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { RangeSlider } from '$lib/components'
+
+	import { FormField, type FormRangeSliderProps } from '.'
+
+	type $$Props = FormRangeSliderProps
+
+	export let color: $$Props['color'] = undefined
+	export let options: $$Props['options']
+	export let cssPrefix: $$Props['cssPrefix'] = 'form-range-slider'
+	export let inline: $$Props['inline'] = undefined
+	export let description: $$Props['description'] = undefined
+	export let value: $$Props['value'] = undefined
+
+	$: rangeSliderProps = {
+		color,
+		inline,
+		description,
+		options,
+	}
+</script>
+
+<FormField {...$$restProps} {cssPrefix}>
+	<slot name="label" />
+	<RangeSlider {...rangeSliderProps} bind:value {options}>
+		<slot />
+	</RangeSlider>
+	<slot name="hint" />
+</FormField>

src/components/Form/index.ts

@@ -12,5 +12,6 @@ export { default as FormSelect } from './FormSelect.svelte'
 export { default as FormSwitch } from './FormSwitch.svelte'
 export { default as FormTextarea } from './FormTextarea.svelte'
 export { default as FormField } from './FormField.svelte'
+export { default as FormRangeSlider } from './FormRangeSlider.svelte'
 
 export * from './Form.types'

src/components/index.ts

@@ -31,7 +31,6 @@ export * from './Popup'
 export * from './Popover'
 export * from './Preview'
 export * from './Progress'
-export * from './RangeSlider'
 export * from './Ribbon'
 export * from './Spinner'
 export * from './Stamp'
@@ -49,5 +48,6 @@ export * from './Radio'
 export * from './Select'
 export * from './Textarea'
 export * from './DatePicker'
+export * from './RangeSlider'
 
 export * from './Status'

src/routes/docs/form/form-range-slider/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { Doc, Preview } from '$lib/components'
+	import FormRangeSliderDefault from './FormRangeSliderDefault.svelte'
+</script>
+
+<h1>Form Range Slider</h1>
+<p>
+	The base component that is used for Range Slider is <a
+		href="https://refreshless.com/nouislider/"
+		target="_blank"
+		rel="noreferrer">noUiSlider</a> you can read about options and details in the documentaion website.
+</p>
+
+<Doc title="Defaults" />
+<Preview src="./FormRangeSliderDefault.svelte">
+	<FormRangeSliderDefault />
+</Preview>

src/routes/docs/form/form-range-slider/FormRangeSliderDefault.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { El, FormRangeSlider } from '@ubeac/svelte'
+	import type { Options } from 'nouislider'
+
+	let value1: any
+	let value2: any
+
+	let format = {
+		to: function (val: any) {
+			return parseInt(val)
+		},
+		from: function (val: any) {
+			return parseInt(val)
+		},
+	}
+
+	let options1: Options = {
+		range: {
+			min: 10,
+			max: 100,
+		},
+		step: 10,
+		start: [40],
+		direction: 'ltr',
+		behaviour: 'tap-drag',
+		tooltips: true,
+		format: format,
+	}
+
+	let options2: Options = {
+		range: {
+			min: 10,
+			max: 100,
+		},
+		start: [20, 70],
+		step: 1,
+		direction: 'ltr',
+		behaviour: 'tap-drag',
+		connect: true,
+		format: format,
+	}
+</script>
+
+<FormRangeSlider color="primary" bind:value={value1} options={options1} label="Zoom(X)" />
+<El>Value: {value1}</El>
+
+<FormRangeSlider options={options2} bind:value={value2} label="Distance Range" />
+<El>Values: {value2}</El>

src/routes/docs/index.ts

@@ -282,6 +282,11 @@ export const navigations = [
 				title: 'FormRadioGroup',
 				icon: 'star',
 			},
+			{
+				route: base_form_path + 'form-range-slider',
+				title: 'FormRangeSlider',
+				icon: 'star',
+			},
 			{
 				route: base_form_path + 'form-select',
 				title: 'FormSelect',