Need help me rangecpntrol

How-to Discussions
1

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">
    <JavaScript>
    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
        }else{
            Width.value = (x - 2) * 10
        }
    })

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

    module.exports = {
        sliderValue: sliderValue,
        Width: Width,
        data: data
    }
    </JavaScript>
    <LinearRangeBehavior  />
    <Panel>
        <DataBinding Target="this.Value" Key="sliderValue" />
        <Circle  ux:Name="thumb" Anchor="50%,50%"  Alignment="Left" Color="White" Width="32" Height="32">
            <Shadow/>
        </Circle>
    </Panel>
    <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"/>
    </Rectangle>
    <WhileCount Items="{data}" LessThan="5">
        <Change  RectSlider.Color="#FBAC5E" Easing="Linear" Duration="0.2"/>
    </WhileCount>
    <WhileCount Items="{data}" GreaterThan="5" LessThan="7">
        <Change  RectSlider.Color="#FFE876" Easing="Linear" Duration="0.2"/>
    </WhileCount>
    <WhileCount Items="{data}" GreaterThan="7">
        <Change  RectSlider.Color="#84D88B" Easing="Linear" Duration="0.2"/>
    </WhileCount>
    <ProgressAnimation>
        <Move Target="thumb" X="1" RelativeTo="ParentSize" />
    </ProgressAnimation>
</RangeControl>
2

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.

3

Hi uldis thank you for taking time to answer. i will give WhileFloat a try.
this is what i want to build http://prntscr.com/ewx8vg

4

WhileFloat doesn’t work too

5

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: https://github.com/fusetools/fuse-samples/pull/55

6

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"/>
        </WhileFloat>

Many thanks uldis, issue solved