Third-party plugins
Advance Range Slider
The Slider component allows users to select a value or range easily, offering smooth interaction and customizable styling for various settings.
Getting started
Setup
Below are the comprehensively outlined steps you can follow to seamlessly integrate <a href="https://refreshless.com/nouislider/" target="_blank" class="link link-primary font-semibold">noUiSlider</a> with Semji.
<body>
<script src="../path/to/vendor/nouislider/dist/nouislider.min.js"></script>
</body>
<div data-range-slider='{
"start": 50,
"connect": "lower",
"range": {
"min": 0,
"max": 100
}
}'></div>Basic example
Simple usage
Design a unique range slider.
Color
Semantic colors
An example showcasing the set of semantic colors.
Size
Basic sizing
Sizing for advance range slider.
Orientation
Vertical Default
The orientation setting allows you to configure the slider as either `"vertical"` or `"horizontal"`, with `"horizontal"` as the default.
Vertical upper connect
Basic Vertical upper connect example.
Vertical range with tooltip
Vertical range with tooltip example.
Illustrations
Disabled
Set the `disabled` attribute to `true` on an element to give it a grayed-out appearance, disable pointer events, and prevent it from being focused. Use `range-slider-disabled:{tw-utility-class}` to apply styles to the disabled state.
RTL
RTL functionality works differently in noUiSlider; setting `dir="rtl"` to the `html` element won’t work. Instead, you need to set `direction: "rtl"` as an option in `data-range-slider`.
Steps
Range inputs, by default, `“snap”` to integer values. To adjust this behavior, set the `step` attribute to a specific integer value.
Tooltip
Enable the `tooltips` parameter by setting it to `true` to display current values within the tooltip.
Range
To enable range mode, set the `start` parameter to an array containing two values.
Range with Tooltip
Demonstrating the combination of tooltips and range mode.
Pips
To enable the display of pips, set the `pips` parameter to an object with specific configuration settings.
Pips auto values
Drawing pips according to the number of steps.
Pass value to HTML element
Use the `update` method to set a value as the text content of an element.
Pass values to HTML elements (Range)
Using the `update` method to assign values as text to the min and max elements.
Applying Thousand Separators and Decimal Formatting
Using the `update` method to assign values as text to the min and max elements.
Assign value to input
Using the `update` method to set values as input field values.
Assign values to multiple input fields
Using the `update` method to pass values as inputs value.
Range with Charts Example
Using the `update` method and its returned values to adjust the foreground chart width.
Range with Charts Example (Modal)
Adjust the chart’s foreground width inside a `modal` using the `update` method’s return values.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a advance range slider.
Slider behaviour
Tap
A handle snaps to a clicked location. A smooth transition is used. This option is default.
Drag
Enables dragging of the range (the connecting bar between handles). This requires two handles, and the `connect` option must be set to `true`. When dragging the range, the slide event triggers for both handles.
Fixed dragging
Maintains a fixed distance between handles when the `drag-fixed` flag is enabled.
Hover
Enabling this option allows the slider to trigger `hover` events when a mouse or pen hovers over it, providing the slider value at the hovered position. The event does not trigger while the slider is being dragged with a mouse or pen, but it does activate for touch interactions.