Range Slider

This range slider is built upon noUiSlider and is used for price and duration filtering within things to do.

Without javascript it is replaced by two inputs for min/max

Price slider

$25 $75
= ui_component('forms/range_slider', properties: {as_below} ) 
{
  title: "Price slider",
  unit: "$",
  unit_position: "before",
  min: {
    extreme: "0",
    value: "25",
    name: "[filters][price][lower]"
  },
  max: {
    extreme: "100",
    value: "75",
    name: "[filters][price][upper]"
  }
}

Capped price slider

$25 $75
= ui_component('forms/range_slider', properties: {as_below} ) 
{
  title: "Capped price slider",
  unit: "$",
  unit_position: "before",
  cap_level: "90",
  min: {
    extreme: "0",
    value: "25",
    name: "[filters][price][lower]"
  },
  max: {
    extreme: "100",
    value: "75",
    name: "[filters][price][upper]"
  }
}

Duration slider

hours24 hours72
= ui_component('forms/range_slider', properties: {as_below} ) 
{
  title: "Duration slider",
  unit: "hours",
  unit_position: "after",
  min: {
    extreme: "1",
    value: "24",
    name: "[filters][duration][lower]"
  },
  max: {
    extreme: "168",
    value: "72",
    name: "[filters][duration][upper]"
  }
}