> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.
# widget:slider
export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
return
{isLoaded && `
}} />}
Powered by Lucidworks Agent Studio
;
};
[localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.widgetSlider
[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.widgetSlider
[old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1189
## Description
Creates a slider
## Usage
as element:
```xml wrap theme={"dark"}
```
#### Parameters
| Param | Type | Details |
| --------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
| response *(optional)* | **object** | A response object |
| query *(optional)* | **string** | The name of the query to build links from. |
| facet-name *(optional)* | **string** | Facet name to use from the response object |
| facet *(optional)* | **string** | A facet object to display |
| field-name *(optional)* | **string** | The field name tells the slider which field to use when creating range filters. |
| min *(optional)* | **number** | The minimum value for the slider. (Defaults to 0, not required for facets) |
| max *(optional)* | **number** | The maximum value for the slider. (Defaults to 100, not required for facets) |
| step *(optional)* | **number** | The interval between each step of the slider. (Defaults to 1, not required for facets) |
| button-label *(optional)* | **string** | The text to be used for the 'Apply' button. |
| to-label *(optional)* | **string** | The string to be inserted in the filter’s display value between the 'from' and 'to' value. (Defaults to '-') |
| prefix *(optional)* | **string** | Add a string before the display value. Useful for currency symbols, for instance. |
| suffix *(optional)* | **string** | Add a string after the display value. Useful for adding units, such as “k” for thousands. |
| invert-range *(optional)* | **boolean** | When invertRange is set to true, the from and to values of the resulting range filter are swapped. |
| multiplier *(optional)* | **number** | The multiplier parameter accepts a number and multiplies the slider’s value by the multiplier when creating a filter. |
| date-format *(optional)* | **string** | How to format the date. See #/api/lightning.filter:dateFormat\[date format filter] for valid formats. |
| number-format *(optional)* | **string** | Format string for the numbers used using the Java DecimalFormat pattern. Default: ',0.' |
| sort *(optional)* | **boolean** | Whether the data should be sort by the directive. Defaults to true. |
## Example
#### Source
```xml wrap theme={"dark"}
