Need help me rangecpntrol

Hi guys i’m building a custom range control and i want to change the color of the background when its equal to a specific value.
WhileCount seems to not react to change.

<RangeControl ux:Class="CustomSlider"   Padding="16,2,16,2" Margin="2" Minimum="0" UserStep="1" Maximum="10" Focus.IsFocusable="true"    HitTestMode="LocalBounds">
    var Observable = require("FuseJS/Observable");
    var sliderValue = Observable(1)
    var Width = Observable(1.25)
    sliderValue.onValueChanged(module, function(x){
        if(x < 0.7){
            Width.value = 1.25 * 10
        }else if (x > 0.7 || x < 9){
            Width.value = x * 10
            Width.value = (x - 2) * 10

    var data = sliderValue.onValueChanged(module, function(x){
        return Math.round(x)

    module.exports = {
        sliderValue: sliderValue,
        Width: Width,
        data: data
    <LinearRangeBehavior  />
        <DataBinding Target="this.Value" Key="sliderValue" />
        <Circle  ux:Name="thumb" Anchor="50%,50%"  Alignment="Left" Color="White" Width="32" Height="32">
    <Rectangle Layer="Background"  Height="22" CornerRadius="45">
        <Stroke Width="1" Brush="#E4EAF1"/>
        <Rectangle Height="21" ClipToBounds="true" CornerRadius="45" ux:Name="RectSlider" Alignment="Left" Width="{Width}%" />
        <Rectangle Layer="Background" Height="22" CornerRadius="45" Color="#ECF3FA"/>
    <WhileCount Items="{data}" LessThan="5">
        <Change  RectSlider.Color="#FBAC5E" Easing="Linear" Duration="0.2"/>
    <WhileCount Items="{data}" GreaterThan="5" LessThan="7">
        <Change  RectSlider.Color="#FFE876" Easing="Linear" Duration="0.2"/>
    <WhileCount Items="{data}" GreaterThan="7">
        <Change  RectSlider.Color="#84D88B" Easing="Linear" Duration="0.2"/>
        <Move Target="thumb" X="1" RelativeTo="ParentSize" />

Hi Kobo,

you can not use WhileCount for what you’re trying to. It only works on observable lists. Instead, you might give WhileFloat a go.

All that said, I can’t help but ask - what is it that you’re trying to build? Because it seems there might be better ways to do it, whatever that is.

Hi uldis thank you for taking time to answer. i will give WhileFloat a try.
this is what i want to build

WhileFloat doesn’t work too

There is a custom rating component WIP that you could take a look at. While it’s not merged, do not expect it to be fully correct or “official”, but it does work:

WhileFloat works by reading the value of the rangecontrol.

        <WhileFloat  Value="{ReadProperty RangeC.Value}" GreaterThan="7" >
            <Change RectSlider.Color="#84D88B" Easing="Linear" Duration="0.1"/>

Many thanks uldis, issue solved