Working with SliderItem - not fully implemented?

[SimonF]

Hi there,
We are trying to set up an rating-page with mutliple "rating-groups".
Since there is no star-rating item (see here and here) we have to use multiple sliders.
By investigating the Slider and the usage in DynamicForms we have also discovered the SliderItem.
It seems to be there, but not fully functional.

1. The height of the sliderItem is not set correctly

We have to additionally set the height of the slider in sliderItemSlider.
The component should set this by default. Also the editorType is not mentioned in the documentation.

Removing the editorType results into a textfield with a slider, which is not supposed to be there


2. The changed event of the FormItem is not firing when the value of the slider changes.

This is reproducable in the latest nightly and all browsers.

isc.DynamicForm.create({
    "ID" : "sliderForm",
    "numCols" : 2,
    "colWidths" : [150, 220],
    "fields" :
    [{
            "ID" : "sliderItem",
            "changed" : function (p1, p2, p3) {
                alert("Slider was changed");
            },
            "name" : "sliderItem",
            "title" : "Slider",
            "width" : 200,
            "editorType" : "SliderItem",
            slider : isc.Slider.create({
                "ID" : "sliderItemSlider",
                "maxValue" : 10,
                "minValue" : 1,
                "numValues" : 10,
                "roundPrecision" : 1,
                "roundValues" : false,
                "showRange" : true,
                "showTitle" : false,
                "showValue" : true,
                "vertical" : false
            })
        }
    ],
})

In addition I would like to add some recommendations.
a) If you are using a SliderItem the DynamicForm gets very high, because of the height of the slider. It would be nice if the value would be displayed at the right of the slider, not above the thumb. Think about multiple (>10 SliderItems) on a page, so you have a lot of scrolling.

Instead if the selected value would be on the right (example shown below):

b) It would be nice if there would be an option to format the selected value. Something like formatEditorValue, so there would be a primitive way to format the shown value, or use a own written value-mapping to a word in an js-function.

Best Regards

[Isomorphic]

It looks like what you've done here is provide a bunch of properties under the "slider" property, where what you should be doing is providing those directly on the SliderItem, and if any properties that you need to set are not documented on SliderItem, then those properties would be set via sliderProperties, not the "slider" attribute.

As written your code violates the AutoChild pattern used by the CanvasItem and would have undefined results.

Having changed your code as outlined above, please let us know if you still see something that appears to be a framework bug.

[SimonF]

Thanks for the quick reply, adjusting the Code as proposed by you (as seen below) solved the issue of the changed event not being fired.
The issue with the default height of the field being much to high persists (see first image in first post).

    isc.DynamicForm.create({
            "ID" : "sliderForm",
            "numCols" : 2,
            "colWidths" : [150, 220],
            "fields" :
            [{
                    "ID" : "sliderItem",
                    "changed" : function (p1, p2, p3) {
                        console.log("Slider was changed");
                    },
                    "name" : "sliderItem",
                    "title" : "Slider",
                    "width" : 200,
                    "editorType" : "SliderItem",
                    "showTitle" : true,
                    "showValue" : true,
                    "maxValue" : 10,
                    "minValue" : 1,
                    "numValues" : 10,
                    "showRange" : true,
                    "vertical" : false,
                }
            ],
        })

As we want to increase the information density in our form, it would really help us to be able to reduce the height of the slider while still being able to see its current value. Would it be possible to display the slider using 2 lines instead of 3 (see Recommendation a) in first post). Either by displaying the value besides the slider bar as shown in the first post, or by displaying the minValue and maxValue besides the slider bar, instead of below it?

Best Regards

[Isomorphic]

The Slider doesn't currently have a built-in option to place the range labels in the way that you want. You could suppress the built-in labels (showRange:false) and add your own, wrapping the whole thing as a "MySlider" custom component with a MySliderItem subclass of CanvasItem for using it in forms. Or you could sponsor a new setting to control placement of the range labels.