From 3d088df57df636d2dda5099e32e2ec01ffcfc85c Mon Sep 17 00:00:00 2001
From: Ole Vik <git@olevik.me>
Date: Tue, 21 Feb 2017 18:07:47 +0100
Subject: [PATCH] Add range-field

Uses input with type 'range' to create a slider-element, a common HTML5 element.
---
 .../forms/fields/range/range.html.twig        | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 themes/grav/templates/forms/fields/range/range.html.twig

diff --git a/themes/grav/templates/forms/fields/range/range.html.twig b/themes/grav/templates/forms/fields/range/range.html.twig
new file mode 100644
index 00000000..6241c3f1
--- /dev/null
+++ b/themes/grav/templates/forms/fields/range/range.html.twig
@@ -0,0 +1,19 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="range"
+  style="display: inline-block;vertical-align: middle;"
+  {% if field.id is defined %}
+    oninput="{{ field.id|e }}_output.value = {{ field.id|e }}.value"
+  {% endif %}
+    {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
+    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
+{% block append %}
+  {% if field.id is defined %}
+    <output name="{{ (scope ~ field.name)|fieldName }}" id="{{ field.id|e }}_output" style="display: inline-block; vertical-align: baseline; padding: 0 0.5em 5px 0.5em;">
+      {{ value|join(', ')|e('html_attr') }}
+    </output>
+  {% endif %}
+{% endblock append %}
\ No newline at end of file