Tooltip value limited by slider range

[wvhn]

Hi @soundar24 ,

we have an application (room temperature controller) where a slider range from 18 to 28°C fits best. Sometimes, if temperature values exeed the slider range, we would like to see at least the correct value in the tooltip while the slider should stay on the defined limit. See the set temperature ("Soll") in the screenshot.

In roundslider, "this.options.value" is also limited to the slider range. Is there a chance to access the correct value within the "tooltipFormat" method?

Thanks and best regards wvhn

[soundar24]

@wvhn by default slider will work in the defined range only.. suppose if you need the outside values also, then you can get the current angle value.. so you can convert that angle into the value...

I have prepared a demo for your requirement, please check and let me know your comments:

https://jsfiddle.net/soundar24/90n6yhmr/

[wvhn]

@soundar24 thanks for the solution. It is amazing what can be done with the plugin. But the solution is not what I have intended. Think about a room temperature controller for air conditioning. Normally you'd want to set the temperature between 18°C and 28°C. So that is the range of the slider. When you come home on a hot summer day and air conditioning was switched off, you will probably have 32°C in your home. The slider should now move to the defined limit of 28°C but the numerical display (tooltip) should show 32°C - the real value (="Ist"). Same applies during the night when temperatures drop below 18°C and the heating itself (set value = "Soll") is reduced automatically to below 18°C.

The example accepts clicking outside the sliders to change the set value. This should not be accepted. Value changes should only be possible by the backend (any values) and/or by the sliders (values inside slider range).

BTW: if it is not possible to display the real value in the tooltip, don't worry. I can insert a placeholder in html like you did and fill it directly by javascript. I just thought the plugin would take better control of the tooltip format than I could do.

[soundar24]

@wvhn oh ok, got your requirement.. actually the tooltip is the visual representation of what you are changing through interaction.. so it will also display in-between the range only.. in this case you can have your own placeholder in html and can place it in the center.. that's much better than customising the behaviour again

[wvhn]

@soundar24 thanks again. The following code does the trick:

     // actualValue is actual value from backend
     // unit is physical unit for actualValue
    $("div#"+id+".outerslider").roundSlider({
        value: actualValue,
        min: scale_min,
        max: scale_max,
        step: step,
        sliderType: "min-range",
        radius: 70,
        showTooltip: true,
        editableTooltip: false,
        circleShape: "full",
        startAngle: "315",
        endAngle: "225",
        handleShape: "round",
        handleSize: "0",
        lineCap: "none",
        width: "8",
        svgMode: true,

        tooltipFormat:function (args){
            return"<span style='position: relative;top:-2.2em;font-size:0.2em;color:"+font_color+"; '>Ist: </span></br><span id ='val' style='position: relative;top:-2.7em;font-weight:bold;font-size:0.45em;color:"+font_color+";'>" + args.value + unit +"</span>";
        },
    });

    // now manipulate tooltip value
        var actualString = (actualValue < 10 ) ? '0'+String(actualValue)+unit : String(actualValue)+unit;
        $("div#"+id+".outerslider .rs-tooltip #val").html(actualString);`