A multislider component represents a slider with multiple ranges.

It includes sliderbuttons, which can be used to let user select a start value and an end value. A multislider accepts a range of values starting from 0 to a maximum value you defined. The default maximum value is 100. You can change the maximum value by setting the max property. Notice that the value of max property is always larger than the value of min property.

1. Green Range (Proper Range): This is the optimal temperature range for the process to run efficiently without any issues. It could be set from 36 to 60 degrees, where the machinery operates at peak performance and product quality is ensured.
2. Yellow Range (Warning Range): This range indicates a temperature that is higher or lower than optimal but not immediately dangerous. It could span from 20 to 35 degrees and from 61 to 72 degrees. Operating in this range might not stop the process, but could indicate inefficiencies or a trend towards an unsafe condition.
3. Red Range (Danger Range): This is the critical range where the temperature is either too low or too high for the process to operate safely. It could be from 0 to 19 degrees and from 73 to 100 degrees. Operating in this range risks damage to the machinery or compromises product integrity, triggering immediate intervention.

<zk xmlns:h="native">
    The slider represents the temperature settings for a manufacturing process
    <nodom apply="demo.input.range_slider.MultiSliderComposer">
        <multislider width="100%" markScale="10">
            <sliderbuttons id="warning" startValue="10" endValue="70"/>
            <sliderbuttons id="proper" startValue="20" endValue="50"/>
        </multislider>
        <vlayout stubonly="true" style="margin-top:50px">
            <h:div class="proper">
                <label value="Proper: "/>
                <label sclass="properRange" stubonly="false"/>
            </h:div>
            <h:div class="warning">
                <label value="Warning: "/>
                <label sclass="warningRange" stubonly="false"/>
            </h:div>
            <h:div class="dangerous">
                <label value="Dangerous: "/>
                <label sclass="dangerousRange" stubonly="false"/>
            </h:div>
        </vlayout>
    </nodom>
    <style src="/widgets/input/multislider/multislider.css"/>
</zk>