div-slider

Slider for selecting a value in the range.

JSON

{
  type*: "slider",
  accessibility: {
    description: "string",
    hint: "string",
    mode: "string",
    mute_after_action: "bool_int",
    state_description: "string",
    type: "string"
  },
  alignment_horizontal: "string",
  alignment_vertical: "string",
  alpha: "number",
  background: [ div-background, ... ],
  border: {
    corner_radius: "int",
    corners_radius: {
      bottom-left: "int",
      bottom-right: "int",
      top-left: "int",
      top-right: "int"
    },
    has_shadow: "bool_int",
    shadow: {
      alpha: "number",
      blur: "int",
      color: "string",
      offset*: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      }
    },
    stroke: {
      color*: "string",
      unit: "string",
      width: "int"
    }
  },
  column_span: "int",
  disappear_actions: [
    {
      disappear_duration: "int",
      download_callbacks: {
        on_fail_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ],
        on_success_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      typed: div-action-typed,
      url: "string",
      visibility_percentage: "int"
    },
    ...
  ],
  extensions: [
    {
      id*: "string",
      params: "object"
    },
    ...
  ],
  focus: {
    background: [ div-background, ... ],
    border: {
      corner_radius: "int",
      corners_radius: {
        bottom-left: "int",
        bottom-right: "int",
        top-left: "int",
        top-right: "int"
      },
      has_shadow: "bool_int",
      shadow: {
        alpha: "number",
        blur: "int",
        color: "string",
        offset*: {
          x*: {
            unit: "string",
            value*: "number"
          },
          y*: {
            unit: "string",
            value*: "number"
          }
        }
      },
      stroke: {
        color*: "string",
        unit: "string",
        width: "int"
      }
    },
    next_focus_ids: {
      down: "string",
      forward: "string",
      left: "string",
      right: "string",
      up: "string"
    },
    on_blur: [
      {
        download_callbacks: {
          on_fail_actions: [ div-action, ... ],
          on_success_actions: [ div-action, ... ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_url: "string",
        menu_items: [
          {
            action: div-action,
            actions: [ div-action, ... ],
            text*: "string"
          },
          ...
        ],
        payload: "object",
        referer: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ],
    on_focus: [
      {
        download_callbacks: {
          on_fail_actions: [ div-action, ... ],
          on_success_actions: [ div-action, ... ]
        },
        is_enabled: "bool_int",
        log_id*: "string",
        log_url: "string",
        menu_items: [
          {
            action: div-action,
            actions: [ div-action, ... ],
            text*: "string"
          },
          ...
        ],
        payload: "object",
        referer: "string",
        target: "string",
        typed: div-action-typed,
        url: "string"
      },
      ...
    ]
  },
  height: div-size,
  id: "string",
  margins: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  max_value: "int",
  min_value: "int",
  paddings: {
    bottom: "int",
    end: "int",
    left: "int",
    right: "int",
    start: "int",
    top: "int",
    unit: "string"
  },
  ranges: [
    {
      end: "int",
      margins: {
        bottom: "int",
        end: "int",
        left: "int",
        right: "int",
        start: "int",
        top: "int",
        unit: "string"
      },
      start: "int",
      track_active_style: div-drawable,
      track_inactive_style: div-drawable
    },
    ...
  ],
  row_span: "int",
  secondary_value_accessibility: {
    description: "string",
    hint: "string",
    mode: "string",
    mute_after_action: "bool_int",
    state_description: "string",
    type: "string"
  },
  selected_actions: [
    {
      download_callbacks: {
        on_fail_actions: [ div-action, ... ],
        on_success_actions: [ div-action, ... ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_url: "string",
      menu_items: [
        {
          action: div-action,
          actions: [ div-action, ... ],
          text*: "string"
        },
        ...
      ],
      payload: "object",
      referer: "string",
      target: "string",
      typed: div-action-typed,
      url: "string"
    },
    ...
  ],
  thumb_secondary_style: div-drawable,
  thumb_secondary_text_style: {
    font_size*: "int",
    font_size_unit: "string",
    font_weight: "string",
    offset: {
      x*: {
        unit: "string",
        value*: "number"
      },
      y*: {
        unit: "string",
        value*: "number"
      }
    },
    text_color: "string"
  },
  thumb_secondary_value_variable: "string",
  thumb_style*: div-drawable,
  thumb_text_style: {
    font_size*: "int",
    font_size_unit: "string",
    font_weight: "string",
    offset: {
      x*: {
        unit: "string",
        value*: "number"
      },
      y*: {
        unit: "string",
        value*: "number"
      }
    },
    text_color: "string"
  },
  thumb_value_variable: "string",
  tick_mark_active_style: div-drawable,
  tick_mark_inactive_style: div-drawable,
  tooltips: [
    {
      animation_in: {
        duration: "int",
        end_value: "number",
        interpolator: "string",
        items: [ div-animation, ... ],
        name*: "string",
        repeat: div-count,
        start_delay: "int",
        start_value: "number"
      },
      animation_out: {
        duration: "int",
        end_value: "number",
        interpolator: "string",
        items: [ div-animation, ... ],
        name*: "string",
        repeat: div-count,
        start_delay: "int",
        start_value: "number"
      },
      div*: div,
      duration: "int",
      id*: "string",
      offset: {
        x*: {
          unit: "string",
          value*: "number"
        },
        y*: {
          unit: "string",
          value*: "number"
        }
      },
      position*: "string"
    },
    ...
  ],
  track_active_style*: div-drawable,
  track_inactive_style*: div-drawable,
  transform: {
    pivot_x: div-pivot,
    pivot_y: div-pivot,
    rotation: "number"
  },
  transition_change: div-change-transition,
  transition_in: div-appearance-transition,
  transition_out: div-appearance-transition,
  transition_triggers: [ "string", ... ],
  visibility: "string",
  visibility_action: {
    download_callbacks: {
      on_fail_actions: [
        {
          download_callbacks: div-download-callbacks,
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ],
      on_success_actions: [
        {
          download_callbacks: div-download-callbacks,
          is_enabled: "bool_int",
          log_id*: "string",
          log_url: "string",
          menu_items: [
            {
              action: div-action,
              actions: [ div-action, ... ],
              text*: "string"
            },
            ...
          ],
          payload: "object",
          referer: "string",
          target: "string",
          typed: div-action-typed,
          url: "string"
        },
        ...
      ]
    },
    is_enabled: "bool_int",
    log_id*: "string",
    log_limit: "int",
    payload: "object",
    referer: "string",
    typed: div-action-typed,
    url: "string",
    visibility_duration: "int",
    visibility_percentage: "int"
  },
  visibility_actions: [
    {
      download_callbacks: {
        on_fail_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ],
        on_success_actions: [
          {
            download_callbacks: div-download-callbacks,
            is_enabled: "bool_int",
            log_id*: "string",
            log_url: "string",
            menu_items: [
              {
                action: div-action,
                actions: [ div-action, ... ],
                text*: "string"
              },
              ...
            ],
            payload: "object",
            referer: "string",
            target: "string",
            typed: div-action-typed,
            url: "string"
          },
          ...
        ]
      },
      is_enabled: "bool_int",
      log_id*: "string",
      log_limit: "int",
      payload: "object",
      referer: "string",
      typed: div-action-typed,
      url: "string",
      visibility_duration: "int",
      visibility_percentage: "int"
    },
    ...
  ],
  width: div-size
}

Parameters

ParametersDescription
accessibility

object

Accessibility settings.

The value has the type div-accessibility.

alignment_horizontal

string

Horizontal alignment of an element inside the parent element.

Possible values: left, center, right, start, end.

alignment_vertical

string

Vertical alignment of an element inside the parent element.

Possible values: top, center, bottom, baseline.

alpha

number

Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

Restriction for the value x: x >= 0.0 && x <= 1.0.

Default value: 1.0.

background

array

Element background. It can contain multiple layers.

An array must not be empty.

border

object

Element stroke.

The value has the type div-border.

column_span

int

Merges cells in a column of the grid element.

Restriction for the value x: x >= 0.

disappear_actions

array

Actions when an element disappears from the screen.

An array must not be empty.

extensions

array

Extensions for additional processing of an element. The list of extensions is given in DivExtension.

An array must not be empty.

focus

object

Parameters when focusing on an element or losing focus.

The value has the type div-focus.

height

object

Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

The value has the type div-size.

Default value: {"type": "wrap_content"}.

id

string

Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

margins

object

External margins from the element stroke.

The value has the type div-edge-insets.

max_value

int

Maximum value. It must be greater than the minimum value.

Default value: 100.

min_value

int

Minimum value.

Default value: 0.

paddings

object

Internal margins from the element stroke.

The value has the type div-edge-insets.

ranges

array

Section style.

An array must not be empty.

Available platforms: Android, iOS.

row_span

int

Merges cells in a string of the grid element.

Restriction for the value x: x >= 0.

secondary_value_accessibility

object

Accessibility settings for the second pointer.

The value has the type div-accessibility.

Available platforms: web.

selected_actions

array

List of actions to be executed when selecting an element in pager.

An array must not be empty.

thumb_secondary_style

object

Style of the second pointer.

The value has the type div-drawable.

List of possible values:
  • div-shape-drawable
  • thumb_secondary_text_style

    object

    Text style in the second pointer.

    The value has the type text_style.

    thumb_secondary_value_variable

    string

    Name of the variable to store the second pointer's current value.

    thumb_style

    object

    Required parameter.

    Style of the first pointer.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • thumb_text_style

    object

    Text style in the first pointer.

    The value has the type text_style.

    thumb_value_variable

    string

    Name of the variable to store the pointer's current value.

    tick_mark_active_style

    object

    Style of active serifs.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • tick_mark_inactive_style

    object

    Style of inactive serifs.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    track_active_style

    object

    Required parameter.

    Style of the active part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • track_inactive_style

    object

    Required parameter.

    Style of the inactive part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be slider.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.

    ParametersDescription
    accessibility

    object

    Accessibility settings.

    The value has the type div-accessibility.

    alignment_horizontal

    string

    Horizontal alignment of an element inside the parent element.

    Possible values: left, center, right, start, end.

    alignment_vertical

    string

    Vertical alignment of an element inside the parent element.

    Possible values: top, center, bottom, baseline.

    alpha

    number

    Sets transparency of the entire element: 0 — completely transparent, 1 — opaque.

    Restriction for the value x: x >= 0.0 && x <= 1.0.

    Default value: 1.0.

    background

    array

    Element background. It can contain multiple layers.

    An array must not be empty.

    border

    object

    Element stroke.

    The value has the type div-border.

    column_span

    int

    Merges cells in a column of the grid element.

    Restriction for the value x: x >= 0.

    disappear_actions

    array

    Actions when an element disappears from the screen.

    An array must not be empty.

    extensions

    array

    Extensions for additional processing of an element. The list of extensions is given in DivExtension.

    An array must not be empty.

    focus

    object

    Parameters when focusing on an element or losing focus.

    The value has the type div-focus.

    height

    object

    Element height. For Android: if there is text in this or in a child element, specify height in sp to scale the element together with the text. To learn more about units of size measurement, see Layout inside the card.

    The value has the type div-size.

    Default value: {"type": "wrap_content"}.

    id

    string

    Element ID. It must be unique within the root element. It is used as accessibilityIdentifier on iOS.

    margins

    object

    External margins from the element stroke.

    The value has the type div-edge-insets.

    max_value

    int

    Maximum value. It must be greater than the minimum value.

    Default value: 100.

    min_value

    int

    Minimum value.

    Default value: 0.

    paddings

    object

    Internal margins from the element stroke.

    The value has the type div-edge-insets.

    ranges

    array

    Section style.

    An array must not be empty.

    Available platforms: Android, iOS.

    row_span

    int

    Merges cells in a string of the grid element.

    Restriction for the value x: x >= 0.

    secondary_value_accessibility

    object

    Accessibility settings for the second pointer.

    The value has the type div-accessibility.

    Available platforms: web.

    selected_actions

    array

    List of actions to be executed when selecting an element in pager.

    An array must not be empty.

    thumb_secondary_style

    object

    Style of the second pointer.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • thumb_secondary_text_style

    object

    Text style in the second pointer.

    The value has the type text_style.

    thumb_secondary_value_variable

    string

    Name of the variable to store the second pointer's current value.

    thumb_style

    object

    Required parameter.

    Style of the first pointer.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • thumb_text_style

    object

    Text style in the first pointer.

    The value has the type text_style.

    thumb_value_variable

    string

    Name of the variable to store the pointer's current value.

    tick_mark_active_style

    object

    Style of active serifs.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • tick_mark_inactive_style

    object

    Style of inactive serifs.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • tooltips

    array

    Tooltips linked to an element. A tooltip can be shown by div-action://show_tooltip?id=, hidden by div-action://hide_tooltip?id= where id — tooltip id.

    An array must not be empty.

    track_active_style

    object

    Required parameter.

    Style of the active part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • track_inactive_style

    object

    Required parameter.

    Style of the inactive part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • transform

    object

    Applies the passed transformation to the element. Content that doesn't fit into the original view area is cut off.

    The value has the type div-transform.

    transition_change

    object

    Change animation. It is played when the position or size of an element changes in the new layout.

    The value has the type div-change-transition.

    transition_in

    object

    Appearance animation. It is played when an element with a new ID appears. To learn more about the concept of transitions, see Animated transitions.

    The value has the type div-appearance-transition.

    transition_out

    object

    Disappearance animation. It is played when an element disappears in the new layout.

    The value has the type div-appearance-transition.

    transition_triggers

    array

    Animation starting triggers. Default value: [state_change, visibility_change].

    An array must not be empty.

    type

    string

    Required parameter.

    The value must always be slider.

    visibility

    string

    Element visibility.

    Possible values: visible, invisible, gone.

    Default value: visible.

    visibility_action

    object

    Tracking visibility of a single element. Not used if the visibility_actions parameter is set.

    The value has the type div-visibility-action.

    visibility_actions

    array

    Actions when an element appears on the screen.

    An array must not be empty.

    width

    object

    Element width.

    The value has the type div-size.

    Default value: {"type": "match_parent"}.

    text_style

    ParametersDescription
    font_size

    int

    Required parameter.

    Font size.

    Restriction for the value x: x >= 0.

    font_size_unit

    string

    Possible values: dp, sp, px.

    Default value: sp.

    Available platforms: Android.

    font_weight

    string

    Style.

    Possible values: light, medium, regular, bold.

    Default value: regular.

    offset

    object

    Shift relative to the center.

    The value has the type div-point.

    text_color

    string

    Text color.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    Default value: #FF000000.

    ParametersDescription
    font_size

    int

    Required parameter.

    Font size.

    Restriction for the value x: x >= 0.

    font_size_unit

    string

    Possible values: dp, sp, px.

    Default value: sp.

    Available platforms: Android.

    font_weight

    string

    Style.

    Possible values: light, medium, regular, bold.

    Default value: regular.

    offset

    object

    Shift relative to the center.

    The value has the type div-point.

    text_color

    string

    Text color.

    Valid formats: #RGB, #ARGB, #RRGGBB, #AARRGGBB.

    Default value: #FF000000.

    range

    ParametersDescription
    end

    int

    End of section.

    margins

    object

    Section margins. Only uses horizontal margins.

    The value has the type div-edge-insets.

    start

    int

    Start of section.

    track_active_style

    object

    Style of the active part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • track_inactive_style

    object

    Style of the inactive part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • ParametersDescription
    end

    int

    End of section.

    margins

    object

    Section margins. Only uses horizontal margins.

    The value has the type div-edge-insets.

    start

    int

    Start of section.

    track_active_style

    object

    Style of the active part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable
  • track_inactive_style

    object

    Style of the inactive part of a scale.

    The value has the type div-drawable.

    List of possible values:
  • div-shape-drawable