---
type: doc
title: Slider
description: Native Liquid slider with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/slider.liquid"
<div data-slot='field'>
  <span id='ui-reference-range-label' data-slot='label'>Range</span>
  <div role='group' aria-labelledby='ui-reference-range-label' data-fallback>
    <input
      type='range'
      name='range_min'
      min='0'
      max='100'
      step='5'
      value='20'
      aria-label='Minimum'
    >
    <input
      type='range'
      name='range_max'
      min='0'
      max='100'
      step='5'
      value='80'
      aria-label='Maximum'
    >
  </div>
  <div data-slot='slider' data-min='0' data-max='100' data-step='5' data-default-value='20,80' hidden>
    <div data-slot='slider-control'>
      <div data-slot='slider-track'>
        <div data-slot='slider-range'></div>
      </div>
      <div
        data-slot='slider-thumb'
        role='slider'
        aria-valuemin='0'
        aria-valuemax='100'
        aria-valuenow='20'
        aria-label='Minimum'
      ></div>
      <div
        data-slot='slider-thumb'
        role='slider'
        aria-valuemin='0'
        aria-valuemax='100'
        aria-valuenow='80'
        aria-label='Maximum'
      ></div>
    </div>
  </div>
</div>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/slider.json https://ui.full.dev/r/liquid/field.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-runtime' %}
{% render 'ui-slider' %}
{% render 'ui-input' %}
{% render 'ui-field' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`slider`, `slider-control`, `slider-range`, `slider-thumb`, `slider-track`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/slider.liquid) · [Theming](/liquid/docs/theming/)

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/slider.json https://ui.full.dev/r/liquid/field.json
```