Custom Slider component in nativescript

4 posts, 0 answers
  1. Swapnil
    Swapnil avatar
    2 posts
    Member since:
    Nov 2016

    Posted 08 Nov Link to this post

    I need a slider ui component which can be customised, I want to change slider UI.

    So my question is that, Is it possible to change slider UI in nativescript? If Yes, then How?

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 08 Nov Link to this post

    Hello Swapnil Mane,

    The slider in NativeScript can be customized with two properties:
     - color: this will change the color of the threshold ball
     - backgroundColor: this will be applied to the color of the "achieved" value (common case to the left of the threshold)

    Those two properties can be applied to the core element and will have an effect on both Android and iOS.
    However, if you need to go further and use whatever the native APIs can provide that you can do it by accessing the native elements that lie behind Slider.
    Those are UISlider for iOS and SeekBar for Android

    Let say at you want to have your iOS application use customized slider.
    Here is how to get access to the native component.
    if (application.ios) {
        var sl = <Slider>page.getViewById("sl");
        sl.ios.minimumTrackTintColor = new UIColor({red: 55, green: 55, blue: 55, alpha:100}); // this is equal to backgroudColor
        sl.ios.maximumTrackTintColor = new UIColor({red: 155, green: 22, blue: 77, alpha:100}); // this is non exposed property which will change the color of the line to theright of the threshold ball
        sl.ios.thumbTintColor = new UIColor({red: 5, green: 100, blue: 200, alpha:100}); // this is equal to color
    }


    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Swapnil
    Swapnil avatar
    2 posts
    Member since:
    Nov 2016

    Posted 4 days and 4 hours ago in reply to Nikolay Iliev Link to this post

    Hi Nikolay,

    Thanks for the reply, actually I am working on slider component and wants to give it a different look.
    Probably got success to make it as per the requirements(by showing images above the slider UI layer).

    Slider thumb is working properly. It is possible to move slider thumb from above layer of images.

    I got stuck at the point where I wants to get the current X and Y position of the slider thumb.

    Please help me, Thanks in advance.

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    95 posts

    Posted 4 days and 1 hour ago Link to this post

    Hi Swapnil Mane,

    I will need some more information about the custom slider you are working on. for example, are you creating
    you custom component for both iOS and Android and are you using the NativeScript module Slider or rewriting the native implementations of the respective components in the native APIs (UISlider for iOS and SeekBar for Android).

    The best approach (if applicable) will be if you can share a code snippet of what you have achieved so far - an archived project sends here (remove node_modules and platforms folder to minimize the size of the package) or a sample GitHub repository will do it..

    With the information I have so far I can only speculate ,still I can give possible solutions.
    If you are using our Slider component (or any other NativeScript view) then you can call gertLocationInWindow or getLocationOnScreen methods. Or even getLocationRelativeTo if this method is applicable for your case.

    Al three methods mentioned above are returning  Point with X and Y properties.

    Example usage:
    var slider = page.getViewById("slider");
     
    setTimeout(function() {
        console.log(slider.getLocationInWindow());
        console.log(slider.getLocationOnScreen());
    }, 200);

    Notice that I have wrapped the call in setTimeout in order to be sure that all component are fully loaded in the page.(as the call is made in the loaded event in the page).

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top