SAPUI5 How to realize a Threshold-Slider (like in WebDynpro)

Question

I am currently facing the challenge to realize a Slider in SAPUI5 exactly like the Threshold-Slider from Webdynpro, which looks like this.

How would you do this? It is highly dynamic, the scale (can be 5 values, can be 3 values etc), the descriptions are depending on the scale value ...

Currently I only find Slider in API, but I doubt this is realizable with it ... any ideas?

---

18.06.2015: currently I am working on extending the sap.ui.commons.Slider, what I got right now is far away from what I try to achieve:

• When clicking on slider, Change Background Color via renderer (each value should have another Color
• Textfield on the right-hand side and a link on the left side (optional parts, coloring is more important)

What i got...

sap.ui.commons.Slider.extend("my.Slider", {
    renderer : {
        renderInnerAttributes : function(oRm, oControl) {
            console.log(oRm); // try to find out, what I re-style
            console.log(oControl); // try to find out, what I re-style
            oRm.addStyle('background-color', '#ffff00');  // no effect

        },
    }
});

var oSlider6 = new my.Slider({
    id : 'Slider6',
    tooltip : 'Slider6',
    width : '500px',
    min : 1,
    max : 4,
    value : 0,
    totalUnits : 4,
    smallStepWidth : 1,
    stepLabels : true,
    labels : [
        "Bad", "Medium", "Good", "Very Good"
    ]
});

return oSlider6;

Answer 1

I think the easiest way to achieve this is to either copy the sap.m.Slider and modify it or to inherit from sap.m.Slider with the UI5 extend mechanism and overstyle it. Or you could extend the sap.m.ProgressIndicator and make it interactive but that would be a bit more work.

All the basic functionality is already there in the slider (scale, number of values, ...) and you can easily modify the background color and the styling of the handle. A link a textual value can be added with a label control next to it.

Check this youtube video on custom controls for more details on how to use the extension mechanism of UI5: https://www.youtube.com/watch?v=4KPS2-LHoO0

Hope that helps,

Michael