Merge pull request #1090 from umap-project/877-sliders-thickness

Display the steps for inputs of type range

umap/static/umap/base.css

@@ -512,6 +512,13 @@ i.info {
 .umap-browse-datalayers {
     padding: 0 10px;
 }
+.umap-field-datalist {
+    display: flex;
+    justify-content: space-between;
+    font-size: 9px;
+    margin-top: -8px;
+    padding: 0 5px;
+}
 .umap-form-iconfield {
     position: relative;
     overflow: hidden;

umap/static/umap/js/umap.forms.js

@@ -801,6 +801,23 @@ L.FormBuilder.Range = L.FormBuilder.Input.extend({
   value: function () {
     return L.DomUtil.hasClass(this.wrapper, 'undefined') ? undefined : this.input.value
   },
+
+  buildHelpText: function () {
+    var datalist = L.DomUtil.create(
+      'datalist',
+      'umap-field-datalist',
+      this.getHelpTextParent()
+    )
+    datalist.id = `range-${this.options.label}`
+    this.input.setAttribute('list', datalist.id)
+    var options = ''
+    for (var i = this.options.min; i <= this.options.max; i += this.options.step) {
+      options += `<option value="${i.toPrecision(2)}" label="${i.toPrecision(
+        2
+      )}"></option>`
+    }
+    datalist.innerHTML = options
+  },
 })
 
 L.FormBuilder.ManageOwner = L.FormBuilder.Element.extend({