range

Information

Folder
src/components/elements/range

Files

Schema
// src/components/elements/range/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/range
additionalProperties: false
properties:
  attributes:
    type: string
  classes:
    type: array
    items:
      type: string
  disabled:
    type: boolean
  id:
    type: string
  max:
    type: number
  min:
    type: number
  steps:
    type: number
  value:
    type: number
Mocks
// src/components/elements/range/mocks.yaml

id: input--range-default
$variants:
  - $name: Disabled
    disabled: true
    id: input--range-disabled
Template
// src/components/elements/range/range.twig

<input{{ attributes }}
	class="Range {{ classes|join(" ") }}"
	type="range"
	{% if id %}id="{{ id }}"{% endif %}
	{% if value is not empty %}value="{{ value }}"{% endif %}
	{% if max %} max="{{ max }}"{% endif %}
	{% if min %} min="{{ min }}"{% endif %}
	{% if steps %} steps="{{ steps }}"{% endif %}
	{% if disabled %} disabled{% endif %}
>

Variants

default
Open
Disabled
Open