MaterialRange extension with min,max,value and ChangeHandler

Author: Kusig

src/main/java/gwt/material/design/client/ui/MaterialRange.java

@@ -21,20 +21,141 @@
  */
 
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NodeList;
+import com.google.gwt.event.dom.client.ChangeEvent;
+import com.google.gwt.event.dom.client.ChangeHandler;
+import com.google.gwt.event.dom.client.HasChangeHandlers;
+import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.Widget;
 
-public class MaterialRange extends Composite {
+/**
+ * Slider for numeric values
+ */
+public class MaterialRange extends Composite implements HasChangeHandlers{
 
-	private static MaterialRangeUiBinder uiBinder = GWT
-			.create(MaterialRangeUiBinder.class);
+	private static MaterialRangeUiBinder uiBinder = GWT.create(MaterialRangeUiBinder.class);
 
 	interface MaterialRangeUiBinder extends UiBinder<Widget, MaterialRange> {
 	}
 
+    private static String VALUE = "value";
+    private static String MAX = "max";
+    private static String MIN = "min";
+    private static String INPUT = "INPUT";
+	
+	// cache the embedded range input element
+	private Element rangeElement = null;
+
 	public MaterialRange() {
 		initWidget(uiBinder.createAndBindUi(this));
 	}
 
+	/**
+	 * Try to identify the embedded range elements input field (see ui xml)
+	 * @return The found element or null if none found.
+	 */
+	private Element getRangeElement() {
+		if (rangeElement == null) {
+			NodeList<Element> elements = this.getElement().getElementsByTagName(INPUT);
+			if (elements != null && elements.getLength() > 0) {
+				rangeElement = elements.getItem(0);
+			}
+		}
+		return rangeElement;
+	}
+
+	/**
+	 * Retrieve the Integer value from the given Attribute of the range element
+	 * @param attribute The name of the attribute on the range element
+	 * @return The Integer vaulue read from the given attribute or null
+	 */
+	private Integer getIntFromRangeElement(String attribute){
+		Element ele = getRangeElement();
+		if(ele!=null){
+          return ele.getPropertyInt(attribute);
+		}
+		return null;
+	}
+
+	/**
+	 * Set the given Integer value to the attribute of the range element
+	 * @param attribute
+	 * @param val
+	 */
+	private void setIntToRangeElement(String attribute,Integer val)
+	{
+		Element ele = getRangeElement();
+		if(ele!=null){
+          ele.setPropertyInt(attribute,val);
+		}
+	}
+	
+	/**
+	 * Read the current value
+	 * @return The Integer value or null
+	 */
+	public Integer getValue() {
+		return getIntFromRangeElement(VALUE);
+	}
+
+	/**
+	 * Write the current value
+	 * @param value value must be >= min and <= max 
+	 */
+	public void setValue(Integer value) {
+		if (value==null)return;
+		if (value<getMin())return;
+		if (value>getMax())return;
+        setIntToRangeElement(VALUE,value);
+	}
+
+	/**
+	 * Read the min value
+	 * @return The Integer or null
+	 */
+	public Integer getMin() {
+		return getIntFromRangeElement(MIN);
+	}
+
+	/**
+	 * Write the current min value
+	 * @param min value must be < max 
+	 */
+	public void setMin(Integer min) {
+		if (min==null)return;
+		if (min>=getMax())return;
+        setIntToRangeElement(MIN,min);
+	}
+
+	/**
+	 * Read the max value
+	 * @return The Integer or null
+	 */
+	public Integer getMax() {
+		return getIntFromRangeElement(MAX);
+	}
+
+	/**
+	 * Write the current max value
+	 * @param max value must be > min
+	 */
+	public void setMax(Integer max) {
+		if (max==null)return;
+		if (max<=getMin())return;
+        setIntToRangeElement(MAX,max);
+	}
+
+	/**
+	 * Register the ChangeHandler to become notified if the user changes the slider. 
+	 * The Handler is called when the user releases the mouse only at the end of the slide
+	 * operation.
+	 */
+	@Override
+	public HandlerRegistration addChangeHandler(ChangeHandler handler) {
+		return addDomHandler(handler, ChangeEvent.getType());
+	}
+	
 }

src/main/resources/gwt/material/design/client/ui/MaterialRange.ui.xml

@@ -26,7 +26,7 @@
 	<g:HTMLPanel>
 		<form action="#">
 		  <p class="range-field">
-		    <input type="range" id="test5" min="0" max="100" />
+		    <input type="range" min="0" max="100" />
 		  </p>
 		</form>
 	</g:HTMLPanel>