How to obtain submitted value from a custom JSF input component?

Question

I am trying to implement JQRangeSlider as a jsf component

My renderer is the following

package beans.customComponents.component;  

import javax.faces.component.UIComponent;  
import javax.faces.context.FacesContext;  
import javax.faces.context.ResponseWriter;  
import javax.faces.render.FacesRenderer;  
import javax.faces.render.Renderer;  
import java.io.IOException;  
import java.text.SimpleDateFormat;  
import java.util.Date;  
import java.util.Map;  


@FacesRenderer(componentFamily = "JqSlider", rendererType = "JqSliderComponent")  
public class JqSliderRenderer extends Renderer {  

 @Override
 public void encodeEnd(FacesContext context, UIComponent component) throws IOException {

    if (!component.isRendered()) {
        return;
    }
    JqSlider jqSlider = (JqSlider) component;


    Map<String, Object> attributes = component.getAttributes();

    Date mindate = (Date) attributes.get("mindate");
    Date maxdate = (Date) attributes.get("maxdate");
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd");

    ResponseWriter writer = context.getResponseWriter();
    writer.startElement("div", component);
    writer.startElement("dl", component);
    writer.writeAttribute("id", jqSlider.getClientId(), null);
    writer.writeAttribute("class", "iThing", null);
    writer.endElement("dl");
    writer.endElement("div");


    String valValue = jqSlider.getClientId() + "_value";
    String valId = jqSlider.getClientId() ;

    writer.startElement("input", jqSlider);
    writer.writeAttribute("type", "hidden", null);
    writer.writeAttribute("id", valValue, null);
    writer.writeAttribute("value", valValue, null);
    writer.endElement("input");


    String mindateString = sdf.format(mindate);
    String maxdateString = sdf.format(maxdate);

    //Make the call string
    StringBuilder callString = new StringBuilder();
    callString.append("rangeSlider(");
    callString.append("'");
    callString.append(mindateString);
    callString.append("'");
    callString.append(",");
    callString.append("'");
    callString.append(maxdateString);
    callString.append("'");
    callString.append(",");
    callString.append("'");
    callString.append(valId);
    callString.append("'");
    callString.append(",");
    callString.append("'");
    callString.append(valValue);
    callString.append("'");
    callString.append(")");
 

    writer.startElement("script", null);
    writer.writeAttribute("type", "text/javascript", null);
    writer.writeText(callString.toString(),null);
    writer.endElement("script");
    }

 }

My UIComponentBase is

 package beans.customComponents.component;

 import javax.faces.component.FacesComponent;
 import javax.faces.component.UIComponentBase;

 @FacesComponent(value = "JqSliderComponent", createTag = true,
      tagName = "jqSliderComponent", namespace = "http://example.com/tags")
public class JqSlider extends UIComponentBase{

public JqSlider() {
   setRendererType("JqSliderComponent");
}
@Override
public String getFamily() {
   return "JqSlider";
}

And my component in xhtml lookups like

 <ta:jqSliderComponent
      mindate="#{TestBean.minDate1}"
      maxdate="#{TestBean.maxDate1}"/>

I am in phase that the slider is rendered in xhtml

And I have the outputvalue in an inputType hidden value.

My problem is that I don't know how to take the value from this hidden value when the user submit the form.

Trying to find the solution , I saw many examples using interface and implementation like this

The base "guide" for me was this

I don't know if I am in the correct way or not.