Vaadin 7 JQueryUI Widgets (Slider)

Vaadin 6 / 7 / 8
1

Hi,
im new to Vaadin and want to implement a relatively simple range slider, i.e. a slider with two handles.
For that reason i decided to use the Vaadin 7 JavaScript API together with JQueryUI slider widget.

In essence, my question is: can i in Vaadin create the

tag, so that i can reference it in JQueryUI?

I have created the MultiKnobSlider Class as follows:

@JavaScript({"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js","https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js","multiknobslider-connector.js"})
public class MultiKnobSlider extends AbstractJavaScriptComponent
{
	public MultiKnobSlider(int defaultMax,int defaultMin)
	{
		getState().min=defaultMin;
		getState().max=defaultMax;
	}
	
	public int getRangeMin()
	{
		return getState().min;
	}
	
	public int getRangeMax()
	{
		return getState().max;
	}
	
	protected MultiKnobSliderState getState()
	{
		return (MultiKnobSliderState) super.getState();
	}
}

The state class as follows:

public class MultiKnobSliderState extends JavaScriptComponentState
	public int min;
	public int max;

Now the problem most likely lies in the javascript connector “multiknobslider-connector.js”
I have tried all sorts of code here. I think the main Problem is that i don’t know how to reference the div id that my class has.
My most recent try was to force the connector to define a div with an id inside the connector.
I have tried to use the this.getConnectorId() function but fail at inserting it at the spot where #slider is currently in the following code.

com_example_vaadintest_MultiKnobSlider = function() {	
	
    $(function () {
        $("#slider").slider();
    });
    
    this.getElement().innerHTML = "<div id='slider'>test</div>";

    };
};

I have not managed to get the component to display anything except for “test”, JQueryUI does not convert the div tag into the slider.

I hope someone has any kind of tips.

Thanks a lot.

-Ikaros

2

The problem is that the stylesheet is missing. It works if I include the jquery-css in my theme. And you should set width and height.

3

There is also an add-on for Vaadin 6 (
RangeSliderBar
), but it looks like the author hasn’t ported it for Vaadin 7.

4

Thanks, I had included the style-sheet wrongly. My working code for the Slider is:

com_example_vaadintest_MultiKnobSlider = function() {    
	var div=this.getElement();
	$(div).width("500");
	$(div).height("50");
	$(div).slider();	
};

You were right about the width and height too, many thanks to you :slight_smile:

Greetings

5

You can also set width and height in your UI instead of javascript.

6

That acutually makes a lot more sense :slight_smile:
Setting it over JavaScript makes the width go to 0 every time the state changes anyway :wink:

Thanks again.