Clamp

Two-thumb slider SolidJS component.

Draft, not production ready. Arrow keys are not supported.

Usage:

npm i -D clamp-solid

// Example

import { render } from 'solid-js/web';
import { createSignal } from 'solid-js';
import Clamp from 'clamp-solid';


const Example = () => {
	const [min, minSet] = createSignal(10);
	const [max, maxSet] = createSignal(75);
	const lowerLimit = 10;
	const upperLimit = 90;
	const width = '12em';

	const Example =
		<div class='example'>
			<Clamp {...{ width, min, minSet, max, maxSet, lowerLimit, upperLimit, }} />

			<div class='numbers'>
				<div>min: {min()}</div>
				<div>max: {max()}</div>
			</div>
		</div>;

	return Example;
};

const clampHolder = document.querySelector('.clamp-holder-1534705cd763');
render(Example, clampHolder);

All props are optional. Defaults:

wdith = 100% height = 24 actually is thumb width float = false lowerLimit = 0 upperLimit = 100 for naturals and 1 for floats min, minSet, max, maxSet signals can be omitted, values can be grabbed from "aria-valuenow" props of start and end thumbs orient always "horizontal" - not implemented css for vertical

Live example