CODEWITHSUNDEEP
javascriptnativescript
Stefan
Stefan

Reputation: 333

Adding slider to demo application

I am trying to add a slider to one of the demo applications. I added a slider to the home-fragment.xml by adding

<Slider value="{{ slider }}" horizontalAlignment="center" width="80%"/>

Now I want to be able to edit and read data from this slider from my viewmodel. According to the slider documentation I need to import the slider and then create it. My code now looks like this:

import { Slider } from "tns-core-modules/ui/slider";

const observableModule = require("data/observable");
const slider = new Slider();

function HomeViewModel() {
    const viewModel = observableModule.fromObject({

    });
    slider.value = 0;

    return viewModel;
}

module.exports = HomeViewModel;

Visual Studio Code does not show any errors but once I launch the app I get the following error:

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.app/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreate failed

Error: Building UI from XML. @file:///app/tabs/tabs-page.xml:30:13
 > Unexpected token import
File: "file:///data/data/org.nativescript.app/files/app/tns_modules/tns-core-modules/ui/builder/builder.js, line: 208, column: 20

I am new to Nativescript and probably made a mistake in the architecture or setup. Can somebody help me out by showing me what goes wrong and how to fix it?

Upvotes: 0

Views: 121

Answers (1)

Eddy Verbruggen
Eddy Verbruggen

Reputation: 3550

it could be a couple of things, but one thing is certain: you don't need to import that Slider component to set its value. You can simply bind to a property (slider = 20;).

The easiest way to start with NativeScript, and to learn how those UI widgets work, is by using the Playground. I've created a little project with a Slider for you to show how it works in "plain" NativeScript with TypeScript: https://play.nativescript.org/?template=play-tsc&id=I7SGei

Upvotes: 1

Related Questions