Nativescript: [Feature] Slider linear-gradient support

[tsonevn]

Enable using the linear-gradient while setting up the backgroundColor for the Slider component. For example:
XML

<Slider class="left-gradient" minValue="0" maxValue="100" value="50" />

CSS

.left-gradient {
    background: linear-gradient(to left, orangered, green, lightblue);
}

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[NickIliev]

@felix-idf you could access the native control and apply the gradient. Here is an example of the android SeekBar that stands behind the NativeScript's Slider.

export function onSliderLoaded(args) { 
    const slider = <Slider>args.object

    const colors = createColorsArr();

    // https://developer.android.com/reference/android/graphics/LinearGradient
    const test = new android.graphics.LinearGradient(0, 0, 1500, 0, colors, null, android.graphics.Shader.TileMode.CLAMP); 

    const shape = new android.graphics.drawable.ShapeDrawable(new android.graphics.drawable.shapes.RectShape());
    shape.getPaint().setShader(test);

    const sliderAndroid = slider.android;
    sliderAndroid.setProgressDrawable(shape);
}

function createColorsArr() { 

    // the below code is actually marshalling java int array of the follwing type
   /*
    new int[] { 0xFF000000, 0xFF0000FF, 0xFF00FF00, 0xFF00FFFF, 0xFFFF0000, 0xFFFF00FF, 0xFFFFFF00, 0xFFFFFFFF}
    */

    const colorTransform = (<any>Array).create("int", 8);

    colorTransform[0] = 0xFF000000;
    colorTransform[1] = 0xFF0000FF;
    colorTransform[2] = 0xFF00FF00;
    colorTransform[3] = 0xFF00FFFF;
    colorTransform[4] = 0xFFFF0000;
    colorTransform[5] = 0xFFFF00FF;
    colorTransform[6] = 0xFFFFFF00;
    colorTransform[7] = 0xFFFFFFFF;

    return colorTransform;
}

and the related slider we are changing in the XML

<Slider value="80" loaded="onSliderLoaded"/>

Playground demonstrating the above can be found here

[jamesharvey2]

I encourage you guys to check HTML5 slider component.
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Please implement properties like:
input[type=range]::-webkit-slider-thumb
input[type=range]::-moz-range-thumb
input[type=range]::-ms-track
input[type=range]::-ms-fill-lower

HTML5 input slider is much older but it has all details.
If possible, please clone HTML5 slider properties for NativeScript slider.
Slider's track, thumb should be customizable with different colors and shapes.

[shiv19]

@NickIliev
I just stumbled upon this thread out of curiosity.
And tried your playground sample. It doesn't seem to work anymore,
it is throwing a marshaling error,
stacktrace.txt