tabler/shared/ui/Range.astro

---
// (registered via addPageScript); without an id → a native <input type=range>.
import { addPageScript } from '@shared/lib/page-scripts';
import InlineScript from '@shared/components/InlineScript.astro';

interface Props {
	min?: number;
	max?: number;
	step?: number;
	value?: string | number;
	id?: string;
	connect?: boolean;
	class?: string;
}

const { min = 0, max = 100, step = 10, value = 50, id, connect = false, class: className } = Astro.props;

const values = String(value).split(',');
const size = values.length;

let script = '';
if (id) {
	// connect array: {% for i in (2..size) %}cycle false,true{% endfor %} then true, false
	let connectStr = '';
	if (size > 1 || connect) {
		const parts: string[] = [];
		for (let i = 2; i <= size; i++) parts.push((i - 2) % 2 === 0 ? 'false' : 'true');
		connectStr = `\t\t\t\t\t  connect: [${[...parts, 'true', 'false'].join(', ')}],\n`;
	}
	const start = size > 1 ? `[${values.join(', ')}]` : values[0];
	script = `<script>
	document.addEventListener("DOMContentLoaded", function () {
		 window.noUiSlider && (noUiSlider.create(document.getElementById('range-${id}'), {
				  start: ${start},
${connectStr}				  step: ${step},
				  range: {
					  min: ${min},
					  max: ${max}
				  }
		 }));
	});
</script>`;
	addPageScript(script);
}
---

{
	id ? (
		<div class:list={['form-range mb-2', className]} id={`range-${id}`} />
	) : (
		<input type="range" class:list={['form-range mb-2', className]} value={value} min={min} max={max} step={step} />
	)
}
{id && <InlineScript code={script} />}