Rangeslider | Dreams AI Agent - Agent Builder Tailwind Admin Template

Basic Range Slider



<div class="rangeslider_basic"></div>

Multi Elements Range



<div id="rangeslider_multielement"></div>

Value Range Slider



<div>
	<div id="nonlinear"></div>
	<div class="flex justify-between mt-3">
		<div class="example-val" id="lower-value"></div>
		<div class="example-val" id="upper-value"></div>
	</div>
</div>

Color Scheme

Primary

Success

Info

Warning

Danger



<div>
	<div class="mb-4">
		<h6 class="mb-2 text-sm">Primary</h6>
		<div class="primary-range" id="rangeslider_basic"></div> 
	</div>

	<div class="mb-4">
		<h6 class="mb-2 text-sm">Success</h6>
		<div class="success-range" id="rangeslider_basic"></div> 
	</div>

	<div class="mb-4">
		<h6 class="mb-2 text-sm">Info</h6>
		<div class="info-range" id="rangeslider_basic"></div> 
	</div>

	<div class="mb-4">
		<h6 class="mb-2 text-sm">Warning</h6>
		<div class="warning-range" id="rangeslider_basic"></div> 
	</div>

	<div>
		<h6 class="mb-2 text-sm">Danger</h6>
		<div class="danger-range" id="rangeslider_basic"></div> 
	</div>
</div>

Locking Sliders Together



<div>
	<div class="slider" id="slider1"></div>
	<span class="example-val mt-1" id="slider1-span"></span> 
	<div class="slider" id="slider2"></div>
	<span class="example-val mt-1" id="slider2-span"></span> 
	<button id="lockbutton" class="btn bg-primary border border-primary text-white text-center hover:bg-primary-900 hover:text-white mt-4">Lock</button>
</div>

Tooltip



<div class="slider mt-13" id="slider-merging-tooltips"></div>

Soft Limits



<div class="slider mb-2" id="soft"></div>

Color Picker



<div class="flex items-center gap-8">
	<div> 
		<div class="sliders" id="red"></div>
		<div class="sliders" id="green"></div>
		<div class="sliders" id="blue"></div>
	</div> 
	<div id="result"></div>
</div>

Multi Range



<div id="slider-vertical" class="mx-auto"></div>

Vertical Range



<div id="slider-connect-upper" class="mx-auto"></div>

Vertical Tooltip



<div id="slider-vertical-tooltip" class="mx-auto"></div>