Slider

{% slider
    id="sales_filter"
    data="demo.daily_orders"
    value_column="total_sales"
    title="Sales Amount"
/%}

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    filters=["sales_filter"]
    date_grain="month"
/%}

Examples

Using `filters`

{% slider
    id="sales_filter"
    data="demo.daily_orders"
    value_column="total_sales"
    title="Sales Amount"
/%}

{% bar_chart
    data="demo.daily_orders"
    x="date"
    y="sum(total_sales)"
    filters=["sales_filter"]
    date_grain="month"
/%}

Using `where`

{% slider
    id="sales_filter"
    data="demo.daily_orders"
    value_column="total_sales"
    range=true
/%}

{% table
    data="demo.daily_orders"
    where="total_sales {{sales_filter.between}}"
/%}

Using Inline SQL

{% slider
    id="sales_filter"
    data="demo.daily_orders"
    value_column="total_sales"
    range=true
/%}

```sql filtered_orders
select * from demo.daily_orders
where total_sales {{sales_filter.between}}
```

{% table data="filtered_orders" /%}

Attributes

string

required

The id of the slider to be used in a filters prop

string

Text displayed above the slider

string

Information tooltip text

string

URL to link the info text to (can only be used with info)

string

Create a custom link title for the info link, placed after the info text (can only be used with info_link)

string

Name of the table to query for min/max values

string

SQL expression to get min/max values from. When provided with data, queries MIN(value_column) and MAX(value_column) to set the slider range.

number

Minimum value for the slider

number

Maximum value for the slider

number

default:"1"

Step size for the slider (must be greater than 0)

boolean

default:"true"

If true, automatically adjusts min/max to align with step boundaries for cleaner numbers (e.g., range 15-103818 with step=10000 becomes 0-110000)

string

default:"num"

Format code for the slider values (e.g., “num”, “usd”, “pct”). See formatValue documentation for available formats. See Value Formatting for available formats.

boolean

default:"false"

If true, enables range mode with two handles for selecting a min/max range

number | array

Initial selected value (number for single value, [min, max] array for range mode)

boolean

default:"false"

If true, shows a number input next to the slider value for direct editing

options group

Filter data to a time period. date_range is an OBJECT with range (the period) and optionally date (which column to filter on when the table has more than one). Shape: date_range={ range="last 12 months" date="order_date" }. range accepts predefined values (last 7 days, month to date), dynamic patterns (Last 90 days), custom windows (2020-01-01 to 2023-03-01), or partial ranges (from 2020-01-01, until 2023-03-01). Pass a plain string for range — the whole object is NOT a string.Example:

date_range={
  range = "today"
  date = "string"
}

Attributes:

range: string - Time period to filter. Use presets like ‘last 7 days’, dynamic patterns like ‘Last 90 days’, custom ranges like ‘2020-01-01 to 2023-03-01’, or partial ranges like ‘from 2020-01-01’.
- Allowed values:
  - today
  - yesterday
  - last 7 days
  - last 30 days
  - last 3 months
  - last 6 months
  - last 12 months
  - previous week
  - previous month
  - previous quarter
  - previous year
  - this week
  - this month
  - this quarter
  - this year
  - next week
  - next month
  - next quarter
  - next year
  - week to date
  - month to date
  - quarter to date
  - year to date
  - all time
date: string - Date column to filter on. Required when the data has multiple date columns.

Using the Filter Variable

Reference this filter using {{filter_id}}. The value returned depends on where you use it.

Context	Default Property	Result
Inline SQL query	`.value`	`500`
`where` attribute	`.value`	`500`
Text / Markdown	`.value`	`500`

Available Properties

You can also access specific properties using {{filter_id.property}}:

.value

Returns the numeric slider value, or the selected range when in range mode.

{% slider id="age_filter" data="users" value_column="age" /%}

```sql filtered_users
select * from users
where age >= {{age_filter}}
```

Example value: 500

.filter

Returns a complete SQL filter expression. Returns true when no value is selected. Only available when value_column is provided.

{% slider id="age_filter" data="users" value_column="age" /%}

```sql filtered_users
select * from users
where {{age_filter.filter}}
```

Example value: age >= 25

.literal

Returns the raw numeric value. Only available in single value mode.

{% slider id="price_filter" min=0 max=1000 /%}

```sql filtered_products
select * from products
where price >= {{price_filter.literal}}
```

Example value: 500

.min

Returns the minimum value of the selected range. Only available when range mode is enabled.

{% slider id="age_filter" data="users" value_column="age" range=true /%}

```sql filtered_users
select * from users
where age >= {{age_filter.min}}
```

Example value: 25

.max

Returns the maximum value of the selected range. Only available when range mode is enabled.

{% slider id="age_filter" data="users" value_column="age" range=true /%}

```sql filtered_users
select * from users
where age <= {{age_filter.max}}
```

Example value: 65

.between

Returns a SQL BETWEEN clause fragment. Only available when range mode is enabled.

{% slider id="price_filter" min=0 max=1000 range=true /%}

```sql filtered_products
select * from products
where sale_price {{price_filter.between}}
```

Example value: BETWEEN 25 AND 65

Get Started

Core Concepts

Features

MCP

CLI

Self Host

Direct Connectors

Evidence Warehouse

Components

Examples

Using `filters`

Using `where`

Using Inline SQL

Attributes

Using the Filter Variable

Available Properties

.value

.filter

.literal

.min

.max

.between

​Examples

​Using filters

​Using where

​Using Inline SQL

​Attributes

​Using the Filter Variable

​Available Properties

​.value

​.filter

​.literal

​.min

​.max

​.between

Examples

Using `filters`

Using `where`

Using Inline SQL

Attributes

Using the Filter Variable

Available Properties

.value

.filter

.literal

.min

.max

.between