Tutorial: Creating a slider

In this tutorial you learn how to create a slider in Kanzi Studio.

This tutorial assumes you understand the basics of working with Kanzi Studio. The best entry points for getting familiar with Kanzi Studio are:

• Tutorial: Create a simple IVI
• Quick start guide

Complete the tutorial by watching the video, or by following the written instructions.

Assets for the tutorial

The starting point of this tutorial is the Slider.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Slider/Assets directory.

The <KanziWorkspace>/Tutorials/Slider/Completed directory contains the completed project of this tutorial.

Create the slider structure

In this section you create the structure for the slider.

To create the slider structure:

1. In Kanzi Studio open the project stored in the <KanziWorkspace>/Tutorials/Slider/Assets directory.
2. In the Project > Prefabs create a Slider 2D node and inside it create:
   • A node that visually represents the rail along which the slider knob moves. For example, use an Image node or several Image nodes inside a layout.
   • A Trajectory Layout 2D node that acts as the rail along which you want to move the slider knob.
   • Inside the Trajectory Layout 2D create a node that you want to use as the visual representation of the slider knob. For example, create an Image node.
   
3. In the Project select the Rail node and in the Properties set the Image property to the Rail image.
   
4. In the Project select the Knob node and in the Properties set the Image property to the Knob image.
   
5. Create a line trajectory that acts as the rail along which the knob of the slider moves:
   1. In the Library press Alt and right-click Trajectories and select the Line Trajectory.
      
   2. In the Properties set:
      • Length to 256
        Set the Length property to the same length as is the length in pixels of the visual representation of the rail.
      • Direction X attribute to 1, all other attributes to 0.
        This way you set the trajectory of the slider on the x axis so that the slider knob moves horizontally on the rail.
      
6. In the Project > Prefabs select the Trajectory Layout 2D and in the Properties set the Trajectory property to the Line Trajectory you created in the previous step.
   
7. In the Window menu select Context Resources to open the Context Resources window.
   The Context Resources window shows the resources in the context of the node you select in the Project.
   
8. Create an alias that Kanzi uses to tell the slider which trajectory to use as the rail of the slider:
   1. In the Project select Prefabs > Slider 2D and in the Context Resources window click Add resource, select Create New > Alias.
      
   2. Name the alias $layout.
      
   3. In the Properties set the Target property to the Trajectory Layout 2D in the Slider 2D node.
      Kanzi uses this alias to tell the slider along which trajectory to move the slider knob.
      

Set the slider size and make the knob move along the trajectory

In this section you set the layout sizes of the slider and the visual representation of the slider rail to meet the size of the visual representation and the trajectory along which the knob on the slider moves.

To set the slider sizes and make the knob move along the trajectory:

1. In the Project drag the Slider 2D node from the Prefabs to the Frame node to instantiate the prefab.
   
2. In the Preview click to enter the Visualize mode and in the drop-down menu select Borders of 2D nodes, and deselect Grid.
   This way you visualize the borders of 2D nodes so that you can see the size of different elements in your slider.
   
3. In the Project select the instantiated Slider 2D prefab, in the Preview click Edit in the top right corner to enter the Edit mode, and in the Node tool click the center square to align the Slider 2D prefab instance to the center of the Frame node.
   
4. In the Project select the instance of the Slider 2D prefab and in the Properties add and set the Layout Height property to 4.
   With this property you set the layout height of your slider to 4 pixels, which is the same height as the height of the Rail image.
   
5. In the Project > Prefabs select the Trajectory Layout 2D node in the Slider 2D node, and in the Properties add and set:
   • Layout Width to 256
   • Layout Height to 4
   
6. In the Project > Prefabs select the Knob node in the Slider 2D node, in the Properties add the Bindings property, and in the Binding Argument Editor set:
   • Property to Trajectory Override Offset
   • Expression to

     {../../RangeConcept.NormalizedValue}

   
   Click Save.
   
7. In the Project > Prefabs select the Slider 2D node, right-click in the Properties, and select Add property > Node > Clip Children.
   When you add and disable the Clip Children property Kanzi shows entire child nodes, even when they are larger than the layout size of their parent node.
   
8. In the Preview click and Edit to exit the Visualize and Edit modes, and click and drag the slider knob along the rail.
   

What's next?

In this tutorial you learned how to create a slider. Now you can:

• Learn how to create a button that changes its appearance based on user actions. See Tutorial: Creating a button.
• Learn how to create a toggle button. See Tutorial: Creating a toggle button.
• Complete other tutorials. See Tutorials.

See also

To learn more about using sliders, see Using the Slider nodes.

To learn more about using bindings, see Using bindings and Reference for bindings expressions.

To learn more about creating Kanzi applications, see Tutorials.

Open topic with navigation