TOBAGO-1840: Range/Slider component
First implementation
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
index 0f3a7fa..2f9d38a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
@@ -395,6 +395,7 @@
stateChangeListener,
stateChangeListenerExpression,
statePreview,
+ step,
style,
suggestMethod,
suggestMethodExpression,
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
index 4ca29b4..3d65de6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
@@ -68,6 +68,7 @@
Panel,
Popup,
Progress,
+ Range,
Row,
Script,
Section,
@@ -154,6 +155,7 @@
public static final String PANEL = "Panel";
public static final String POPUP = "Popup";
public static final String PROGRESS = "Progress";
+ public static final String RANGE = "Range";
public static final String ROW = "Row";
public static final String SCRIPT = "Script";
public static final String SECTION = "Section";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
index 9fb85bd..58bac7b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
@@ -64,6 +64,7 @@
progress,
reload,
row,
+ range,
script,
section,
segmentLayout,
@@ -135,6 +136,7 @@
public static final String PROGRESS = "progress";
public static final String RELOAD = "reload";
public static final String ROW = "row";
+ public static final String RANGE = "range";
public static final String SCRIPT = "script";
public static final String SECTION = "section";
public static final String SEGMENT_LAYOUT = "segmentLayout";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
index 0683da7..d818c22 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
@@ -37,6 +37,8 @@
private static final Logger LOG = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+ public abstract String getPlaceholder();
+
public String getPattern() {
final FacesContext facesContext = getFacesContext();
Converter converter = ComponentUtils.getConverter(facesContext, this, getSubmittedValue());
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
index e4caab4..d30e2d6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
@@ -24,4 +24,6 @@
*/
public abstract class AbstractUIIn extends AbstractUIInput {
+ public abstract String getPlaceholder();
+
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
index 885d3c3..a029ea8 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
@@ -43,8 +43,6 @@
public abstract boolean isReadonly();
- public abstract String getPlaceholder();
-
@Override
public String getFieldId(final FacesContext facesContext) {
return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "field";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java
new file mode 100644
index 0000000..b843391
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java
@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.internal.component;
+
+/**
+ * {@link org.apache.myfaces.tobago.internal.taglib.component.RangeTagDeclaration}
+ */
+public abstract class AbstractUIRange extends AbstractUIInput {
+
+ public abstract Integer getMin();
+ public abstract Integer getMax();
+ public abstract Integer getStep();
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
index b030f1e..a83bc52 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
@@ -29,4 +29,6 @@
public abstract SanitizeMode getSanitize();
public abstract Integer getRows();
+
+ public abstract String getPlaceholder();
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index d7b5d1d..9cd6bca 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -23,6 +23,7 @@
import org.apache.myfaces.tobago.component.Facets;
import org.apache.myfaces.tobago.component.RendererTypes;
import org.apache.myfaces.tobago.internal.component.AbstractUIButton;
+import org.apache.myfaces.tobago.internal.component.AbstractUIIn;
import org.apache.myfaces.tobago.internal.component.AbstractUIInput;
import org.apache.myfaces.tobago.internal.component.AbstractUIOut;
import org.apache.myfaces.tobago.internal.component.AbstractUISelectOneChoice;
@@ -61,7 +62,7 @@
@Override
protected void encodeBeginField(final FacesContext facesContext, final UIComponent component)
throws IOException {
- final AbstractUIInput input = (AbstractUIInput) component;
+ final AbstractUIIn input = (AbstractUIIn) component;
final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, input);
final String currentValue = getCurrentValue(facesContext, input);
final boolean password = ComponentUtils.getBooleanAttribute(input, Attributes.password);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java
new file mode 100644
index 0000000..d6a681b
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java
@@ -0,0 +1,136 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.internal.renderkit.renderer;
+
+import org.apache.myfaces.tobago.internal.component.AbstractUIRange;
+import org.apache.myfaces.tobago.internal.util.AccessKeyLogger;
+import org.apache.myfaces.tobago.internal.util.HtmlRendererUtils;
+import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
+import org.apache.myfaces.tobago.renderkit.css.CssItem;
+import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
+import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
+import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
+import org.apache.myfaces.tobago.util.ComponentUtils;
+import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import javax.faces.component.UIComponent;
+import javax.faces.context.FacesContext;
+import java.io.IOException;
+import java.lang.invoke.MethodHandles;
+
+public class RangeRenderer extends MessageLayoutRendererBase {
+
+ private static final Logger LOG = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+ @Override
+ public HtmlElements getComponentTag() {
+ return HtmlElements.TOBAGO_RANGE;
+ }
+
+ @Override
+ protected void encodeBeginField(final FacesContext facesContext, final UIComponent component)
+ throws IOException {
+ final AbstractUIRange range = (AbstractUIRange) component;
+ final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, range);
+ final String currentValue = getCurrentValue(facesContext, range);
+ final String clientId = range.getClientId(facesContext);
+ final String fieldId = range.getFieldId(facesContext);
+ final boolean readonly = range.isReadonly();
+ final boolean disabled = range.isDisabled();
+ final int min = range.getMin();
+ final int max = range.getMax();
+ final int step = range.getStep();
+
+ final TobagoResponseWriter writer = getResponseWriter(facesContext);
+
+ writer.startElement(HtmlElements.INPUT);
+
+ if (range.getAccessKey() != null) {
+ writer.writeAttribute(HtmlAttributes.ACCESSKEY, Character.toString(range.getAccessKey()), false);
+ AccessKeyLogger.addAccessKey(facesContext, range.getAccessKey(), clientId);
+ }
+
+ writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.RANGE);
+ writer.writeNameAttribute(clientId);
+ writer.writeIdAttribute(fieldId);
+ HtmlRendererUtils.writeDataAttributes(facesContext, writer, range);
+ if (currentValue != null) {
+ writer.writeAttribute(HtmlAttributes.VALUE, currentValue, true);
+ }
+ if (title != null) {
+ writer.writeAttribute(HtmlAttributes.TITLE, title, true);
+ }
+ writer.writeAttribute(HtmlAttributes.READONLY, readonly);
+ writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
+ writer.writeAttribute(HtmlAttributes.TABINDEX, range.getTabIndex());
+ writer.writeAttribute(HtmlAttributes.MIN, min);
+ writer.writeAttribute(HtmlAttributes.MAX, max);
+ writer.writeAttribute(HtmlAttributes.STEP, step);
+
+ final CssItem rendererCssClass = getRendererCssClass();
+ writer.writeClassAttribute(
+ rendererCssClass,
+ BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(range)),
+ BootstrapClass.FORM_CONTROL,
+ range.getCustomClass());
+
+ HtmlRendererUtils.renderFocus(clientId, range.isFocus(), ComponentUtils.isError(range), facesContext, writer);
+
+ writer.endElement(HtmlElements.INPUT);
+
+ encodeTooltip(writer, currentValue);
+
+ encodeBehavior(writer, facesContext, range);
+ }
+
+ private void encodeTooltip(final TobagoResponseWriter writer, final String content) throws IOException {
+ writer.startElement(HtmlElements.DIV);
+// writer.writeClassAttribute(TobagoClass.POPOVER__BOX, BootstrapClass.POPOVER);
+ writer.writeClassAttribute(BootstrapClass.POPOVER, BootstrapClass.D_NONE);
+// writer.writeNameAttribute(popoverId);
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(BootstrapClass.ARROW);
+ writer.endElement(HtmlElements.DIV);
+ writer.startElement(HtmlElements.DIV);
+ writer.writeClassAttribute(BootstrapClass.POPOVER_BODY);
+ if (content != null) {
+ writer.writeText(content);
+ }
+ writer.endElement(HtmlElements.DIV);
+ writer.endElement(HtmlElements.DIV);
+ }
+
+ @Override
+ protected void encodeEndField(final FacesContext facesContext, final UIComponent component) throws IOException {
+ }
+
+ protected CssItem getRendererCssClass() {
+ return TobagoClass.IN;
+ }
+
+ @Override
+ protected String getFieldId(final FacesContext facesContext, final UIComponent component) {
+ final AbstractUIRange range = (AbstractUIRange) component;
+ return range.getFieldId(facesContext);
+ }
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java
new file mode 100644
index 0000000..e7a2cce
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java
@@ -0,0 +1,99 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.internal.taglib.component;
+
+import org.apache.myfaces.tobago.apt.annotation.Behavior;
+import org.apache.myfaces.tobago.apt.annotation.BodyContentDescription;
+import org.apache.myfaces.tobago.apt.annotation.Tag;
+import org.apache.myfaces.tobago.apt.annotation.TagAttribute;
+import org.apache.myfaces.tobago.apt.annotation.UIComponentTag;
+import org.apache.myfaces.tobago.apt.annotation.UIComponentTagAttribute;
+import org.apache.myfaces.tobago.component.ClientBehaviors;
+import org.apache.myfaces.tobago.component.RendererTypes;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasAccessKey;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverter;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverterMessage;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasHelp;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasIdBindingAndRendered;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabel;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabelLayout;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasTabIndex;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasTip;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValidator;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValidatorMessage;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValue;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValueChangeListener;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsDisabled;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsFocus;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsReadonly;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsVisual;
+
+import javax.faces.component.UIInput;
+
+/**
+ * Renders a input field with type range.
+ */
+@Tag(name = "range")
+@BodyContentDescription(anyTagOf = "facestag")
+@UIComponentTag(
+ uiComponent = "org.apache.myfaces.tobago.component.UIRange",
+ uiComponentFacesClass = "javax.faces.component.UIInput",
+ componentFamily = UIInput.COMPONENT_FAMILY,
+ rendererType = RendererTypes.RANGE,
+ behaviors = {
+ @Behavior(
+ name = ClientBehaviors.CHANGE,
+ isDefault = true),
+ @Behavior(
+ name = ClientBehaviors.CLICK),
+ @Behavior(
+ name = ClientBehaviors.DBLCLICK),
+ @Behavior(
+ name = ClientBehaviors.FOCUS),
+ @Behavior(
+ name = ClientBehaviors.BLUR)
+ })
+public interface RangeTagDeclaration
+ extends HasIdBindingAndRendered, HasConverter, IsReadonly, IsDisabled, HasHelp, HasTip,
+ HasAccessKey, HasValidator, HasValue, HasValueChangeListener, HasTabIndex, IsFocus, IsVisual,
+ HasValidatorMessage, HasConverterMessage, HasLabel, HasLabelLayout {
+
+ /**
+ * Sets the minimum value of the range.
+ */
+ @TagAttribute
+ @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "0")
+ void setMin(String min);
+
+ /**
+ * Sets the maximum value of the range.
+ */
+ @TagAttribute
+ @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "100")
+ void setMax(String max);
+
+ /**
+ * Sets the step size of the range.
+ */
+ @TagAttribute
+ @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "1")
+ void setStep(String step);
+
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index 46304f7..495e683 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -148,6 +148,7 @@
TOBAGO_PANEL("tobago-panel"),
TOBAGO_POPOVER("tobago-popover"),
TOBAGO_POPUP("tobago-popup"),
+ TOBAGO_RANGE("tobago-range"),
TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 4f6bcd9..f8ecfb5 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -872,6 +872,10 @@
.tobago-progress {
}
+/* range ---------------------------------------------------------- */
+.tobago-range {
+}
+
/* stars rating ------------------------------------------------------------ */
tobago-stars {
display: block;
diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java
new file mode 100644
index 0000000..c629881
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java
@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+package org.apache.myfaces.tobago.example.demo;
+
+import javax.enterprise.context.RequestScoped;
+import javax.inject.Named;
+
+@RequestScoped
+@Named
+public class RangeController {
+
+ private Integer one = 10;
+ private Double two = 20.0d;
+ private int three = 30;
+
+ public Integer getOne() {
+ return one;
+ }
+
+ public void setOne(Integer one) {
+ this.one = one;
+ }
+
+ public Double getTwo() {
+ return two;
+ }
+
+ public void setTwo(Double two) {
+ this.two = two;
+ }
+
+ public int getThree() {
+ return three;
+ }
+
+ public void setThree(int three) {
+ this.three = three;
+ }
+}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml
new file mode 100644
index 0000000..58e80c6
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+-->
+
+<ui:composition template="/main.xhtml"
+ xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:tc="http://myfaces.apache.org/tobago/component"
+ xmlns:ui="http://java.sun.com/jsf/facelets"
+ xmlns:f="http://java.sun.com/jsf/core">
+
+ <tc:section label="Input Type Range">
+
+ <tc:range label="0 to 100" min="0" max="100" value="#{rangeController.one}"/>
+
+ <tc:range label="0 to 100 step 10" min="0" max="100" step="10" value="#{rangeController.two}"/>
+
+ <tc:label value="without label"/>
+ <tc:range value="#{rangeController.three}" />
+
+ <tc:button label="Submit"/>
+
+ Values on server:
+ "#{rangeController.one}" (Integer), "#{rangeController.two}" (Double), "#{rangeController.three}" (int)
+
+ </tc:section>
+
+ <tc:section>
+ <f:facet name="label">Input Type Range with Datalist <tc:badge value="Not implemented yet!" markup="warning"/></f:facet>
+
+ <input type="range" list="datalist" class="form-control-range"/>
+ <datalist id="datalist">
+ <option value="0" label="0 %"/>
+ <option value="25" label="25 %"/>
+ <option value="50" label="50 %"/>
+ <option value="75" label="75 %"/>
+ <option value="100" label="100 %"/>
+ </datalist>
+
+ </tc:section>
+</ui:composition>
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index 33b5670..b2c91ce 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -32,6 +32,7 @@
import "./tobago-panel";
import "./tobago-popover";
import "./tobago-popup";
+import "./tobago-range";
import "./tobago-reload";
import "./tobago-scroll";
import "./tobago-select-boolean-checkbox";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts
new file mode 100644
index 0000000..ef9a97a
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts
@@ -0,0 +1,78 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Popper from "popper.js";
+
+class Range extends HTMLElement {
+
+ private popper: Popper;
+ private timeout: number;
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback(): void {
+ let range = this.range;
+ let listener = this.showPopper.bind(this);
+ range.addEventListener("input", listener);
+ range.addEventListener("focus", listener);
+ }
+
+ get range(): HTMLInputElement {
+ return this.querySelector("input[type=range]");
+ }
+
+ get tooltip(): HTMLElement {
+ return this.querySelector(".popover");
+ }
+
+ get tooltipBody(): HTMLElement {
+ return this.querySelector(".popover-body");
+ }
+
+ showPopper(): void {
+ let tooltip = this.tooltip;
+ let range = this.range;
+
+ // update value to display
+ this.tooltipBody.innerHTML = `${range.value}`; // todo: use html from lit-html
+
+ // init
+ if (!this.popper) {
+ this.popper = new Popper(range, tooltip, {
+ placement: "right"
+ });
+ }
+
+ // show
+ tooltip.classList.remove("d-none");
+
+ // hide after some seconds
+ if (this.timeout) {
+ window.clearTimeout(this.timeout);
+ }
+ this.timeout = window.setTimeout(() => {
+ tooltip.classList.add("d-none");
+ console.log("timeout");
+ }, 5_000);
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+ window.customElements.define("tobago-range", Range);
+});
