develope rangeinput range selector component

package.json

@@ -27,6 +27,7 @@
 		"litepicker": "^2.0.12",
 		"moment": "^2.29.4",
 		"nanoid": "^3.3.4",
+		"nouislider": "^15.6.1",
 		"prism-svelte": "^0.5.0",
 		"prismjs": "^1.29.0",
 		"swiper": "^8.4.2",

src/components/Form/Form.types.ts

@@ -6,6 +6,8 @@ import type {
 	InputProps,
 	InputStates,
 	RadioGroupProps,
+	RangeSliderProps,
+	RangeSliderTarget,
 	SelectProps,
 } from '$lib/components'
 
@@ -29,4 +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> {
+	element?: RangeSliderTarget
+}
+
 export interface FormFieldsetProps extends Partial<FormFieldProps>, Partial<FieldsetProps> {}

src/components/Form/FormRangeSlider.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { FormField, type FormRangeSliderProps, RangeSlider } from '$lib/components'
+
+	type $$Props = FormRangeSliderProps
+
+	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
+
+	/**
+	 * the color of RangeSlider
+	 */
+	export let color: $$Props['color'] = undefined
+
+	/**
+	 * the start value(s) of RangeSlider
+	 */
+	export let startValue: $$Props['startValue']
+
+	/**
+	 * the value of step for RangeSlider
+	 */
+	export let step: $$Props['step'] = undefined
+
+	/**
+	 * the orientation of RangeSlider
+	 */
+	export let orientation: $$Props['orientation'] = undefined
+
+	/**
+	 * the mode of RangeSlider
+	 */
+	export let mode: $$Props['mode'] = undefined
+
+	/**
+	 * the minimum value of RangeSlider
+	 */
+	export let min: $$Props['min'] = 0
+
+	/**
+	 * the maximum value of RangeSlider
+	 */
+	export let max: $$Props['max'] = 10
+
+	/**
+	 * show the RangeSlider to rtl
+	 */
+	export let direction: $$Props['direction'] = undefined
+
+	/**
+	 * show RangeSlider tooltip
+	 */
+	export let tooltips: $$Props['tooltips'] = undefined
+
+	/**
+	 * set connect value of RangeSlider
+	 */
+	export let connect: $$Props['connect'] = undefined
+
+	/**
+	 * set connect value of RangeSlider
+	 */
+	export let behaviour: $$Props['behaviour'] = undefined
+
+	$: rangeSliderProps = {
+		color,
+		inline,
+		description,
+		max,
+		min,
+		mode,
+		orientation,
+		step,
+		startValue,
+		direction,
+		tooltips,
+		connect,
+		behaviour,
+	}
+</script>
+
+<FormField {...$$restProps} {cssPrefix}>
+	<slot name="label" />
+	<RangeSlider {...rangeSliderProps} bind:value />
+	<slot name="hint" />
+</FormField>

src/components/Form/index.ts

@@ -11,5 +11,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/RangeSlider/RangeSlider.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+
+	import noUiSlider from 'nouislider'
+
+	import { El, type RangeSliderProps, type RangeSliderTarget } from '$lib/components'
+
+	type $$Props = RangeSliderProps
+
+	/**
+	 * Set Css Prefix for the RangeSlider
+	 */
+	export let cssPrefix: $$Props['cssPrefix'] = 'range-slider'
+
+	/**
+	 * Target DOM element for RangeSlider
+	 */
+	export let element: $$Props['element'] = undefined
+
+	/**
+	 * the Value of RangeSlider
+	 */
+	export let value: $$Props['value'] = undefined
+
+	/**
+	 * the color of RangeSlider
+	 */
+	export let color: $$Props['color'] = undefined
+
+	/**
+	 * the start value(s) of RangeSlider
+	 */
+	export let startValue: $$Props['startValue']
+
+	/**
+	 * the value of step for RangeSlider
+	 */
+	export let step: $$Props['step'] = undefined
+
+	/**
+	 * the orientation of RangeSlider
+	 */
+	export let orientation: $$Props['orientation'] = undefined
+
+	/**
+	 * the mode of RangeSlider
+	 */
+	export let mode: $$Props['mode'] = undefined
+
+	/**
+	 * the minimum value of RangeSlider
+	 */
+	export let min: $$Props['min'] = 0
+
+	/**
+	 * the maximum value of RangeSlider
+	 */
+	export let max: $$Props['max'] = 10
+
+	/**
+	 * show the RangeSlider to rtl
+	 */
+	export let direction: $$Props['direction'] = undefined
+
+	/**
+	 * show RangeSlider tooltip
+	 */
+	export let tooltips: $$Props['tooltips'] = undefined
+
+	/**
+	 * set connect value of RangeSlider
+	 */
+	export let connect: $$Props['connect'] = undefined
+
+	/**
+	 * set connect value of RangeSlider
+	 */
+	export let behaviour: $$Props['behaviour'] = undefined
+
+	let cssProps: any = {}
+	let otherProps: any = {}
+	let options: any = {
+		range: {
+			min: typeof min !== 'number' ? parseInt(min?.toString()) : min,
+			max: typeof max !== 'number' ? parseInt(max?.toString()) : max,
+		},
+		connect: connect,
+		orientation: orientation ?? 'horizontal',
+		direction: direction ?? 'ltr',
+		start: startValue?.split(','),
+		tooltips: tooltips ?? false,
+		step: step !== undefined ? (typeof step !== 'number' ? parseInt(step?.toString()) : step) : undefined,
+		mode: mode,
+		behaviour: behaviour?.map((element) => element).join('-'),
+	}
+
+	$: {
+		cssProps = {
+			color,
+			orientation: orientation ?? 'horizontal',
+		}
+		otherProps = { cssPrefix, options }
+		if (element !== undefined) {
+			element.noUiSlider?.updateOptions(options, true)
+		}
+	}
+
+	onMount(() => {
+		if (element !== undefined && options !== undefined) {
+			noUiSlider.create(element, options)
+
+			element.noUiSlider?.on('update', (values: any, handle: any) => {
+				value = values
+			})
+		}
+		return () => {
+			if (element !== undefined) {
+				element.noUiSlider?.destroy()
+			}
+		}
+	})
+</script>
+
+<El {...$$restProps} {cssProps} {...otherProps} bind:value bind:element />

src/components/RangeSlider/RangeSlider.types.ts

@@ -0,0 +1,26 @@
+import type { Options as RangeSliderOptions, target as RangeSliderTarget } from 'nouislider'
+
+import type { ElProps } from '$lib/components'
+
+export type { RangeSliderOptions, RangeSliderTarget }
+
+declare type Directions = 'ltr' | 'rtl'
+declare type Orientations = 'horizontal' | 'vertical'
+declare type RangeSliderBehaviors = 'drag' | 'drag-all' | 'tap' | 'fixed' | 'snap' | 'unconstrained' | 'none'
+
+export interface RangeSliderProps extends Partial<ElProps> {
+	color?: Colors
+	value?: any
+	element?: RangeSliderTarget
+	startValue: string
+	step?: number | string
+	format?: any
+	mode?: string
+	min: number | string
+	max: number | string
+	direction?: Directions
+	orientation?: Orientations
+	tooltips?: boolean
+	connect?: 'lower' | 'upper' | boolean | boolean[]
+	behaviour?: RangeSliderBehaviors[]
+}

src/components/RangeSlider/index.ts

@@ -0,0 +1,2 @@
+export { default as RangeSlider } from './RangeSlider.svelte'
+export * from './RangeSlider.types'

src/components/index.ts

@@ -49,5 +49,6 @@ export * from './Radio'
 export * from './Select'
 export * from './Textarea'
 export * from './DatePicker'
+export * from './RangeSlider'
 
 export * from './Status'

src/routes/docs/components/range-sliders/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { Doc, Preview } from '$lib/components'
+	import RangeSliderDefault from './RangeSliderDefault.svelte'
+	import RangeSliderColors from './RangeSliderColors.svelte'
+</script>
+
+<h1>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="./RangeSliderDefault.svelte">
+	<RangeSliderDefault />
+</Preview>
+
+<Doc title="Colors">You can set <code>color</code> property to set the range slider color.</Doc>
+<Preview src="./RangeSliderColors.svelte">
+	<RangeSliderColors />
+</Preview>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { RangeSlider } from '@ubeac/svelte'
+
+	let value: any
+</script>
+
+<RangeSlider color="primary" bind:value startValue="70" min="10" max="100" step="1" connect="lower" />
+<RangeSlider color="warning" bind:value startValue="40" min="10" max="100" step="1" connect="upper" />
+<RangeSlider color="success" bind:value startValue="70" min="10" max="100" step="1" connect="lower" />
+<RangeSlider color="danger" bind:value startValue="40" min="10" max="100" step="1" connect="upper" />
+<RangeSlider color="purple" bind:value startValue="70" min="10" max="100" step="1" connect="lower" />
+<RangeSlider color="azure" bind:value startValue="40" min="10" max="100" step="1" connect="upper" />

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { RangeSlider } from '@ubeac/svelte'
+
+	let value1: any
+	let value2: any
+</script>
+
+<RangeSlider color="primary" bind:value={value1} min="0" max="100" step="10" startValue="40" tooltips />
+<i>Value: {value1}</i>
+
+<RangeSlider bind:value={value2} min="0" max="100" step="1" connect startValue="20,70" />
+<i>Values: {value2}</i>

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,20 @@
+<script lang="ts">
+	import { El, FormRangeSlider } from '@ubeac/svelte'
+
+	let value1: any
+	let value2: any
+</script>
+
+<FormRangeSlider
+	color="primary"
+	bind:value={value1}
+	startValue="40"
+	min="10"
+	max="100"
+	step="10"
+	connect="lower"
+	label="Zoom(X)" />
+<El>Value: {value1}</El>
+
+<FormRangeSlider bind:value={value2} startValue="20,70" min="10" max="100" step="1" connect label="Distance Range" />
+<El>Values: {value2}</El>

src/routes/docs/index.ts

@@ -192,6 +192,11 @@ export const navigations = [
 				title: 'RadioGroup',
 				icon: 'star',
 			},
+			{
+				route: base_component_path + 'range-sliders',
+				title: 'RangeSlider',
+				icon: 'star',
+			},
 			{
 				route: base_component_path + 'ribbon',
 				title: 'Ribbon',
@@ -299,6 +304,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',