## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Slider Category: forms Description: Range Slider ## Small Variant ### SenangStart CSS Code ```html <div space="w:[100%]"> <label for="range-s" layout="block" space="m-b:small" visual="text-size:small font:tw-medium text:gray-900">Range S</label> <input id="range-s" type="range" value="50" space="w:[100%] h:tiny m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none range-sm accent-blue-600"> </div> ``` ### Tailwind CSS Code ```html <div class="w-full"> <label for="range-s" class="block mb-2 text-sm font-medium text-gray-900">Range S</label> <input id="range-s" type="range" value="50" class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm accent-blue-600"> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div space="w:[100%]"> <label for="range-m" layout="block" space="m-b:small" visual="text-size:base font:tw-medium text:gray-900">Range M</label> <input id="range-m" type="range" value="50" space="w:[100%] h:small m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none accent-blue-600"> </div> ``` ### Tailwind CSS Code ```html <div class="w-full"> <label for="range-m" class="block mb-2 text-base font-medium text-gray-900">Range M</label> <input id="range-m" type="range" value="50" class="w-full h-2 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div space="w:[100%]"> <label for="range-l" layout="block" space="m-b:small" visual="text-size:large font:tw-medium text:gray-900">Range L</label> <input id="range-l" type="range" value="50" space="w:[100%] h:small-3x m-b:medium-3x" visual="bg:gray-200 rounded:medium cursor:pointer" class="appearance-none accent-blue-600"> </div> ``` ### Tailwind CSS Code ```html <div class="w-full"> <label for="range-l" class="block mb-2 text-lg font-medium text-gray-900">Range L</label> <input id="range-l" type="range" value="50" class="w-full h-3 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"> </div> ```