<?xml version="1.0" encoding="utf-8"?>

<!-- Copyright (c) 2007-2010 Nokia Corporation and/or its subsidiary(-ies) All rights reserved. -->

<!-- This component and the accompanying materials are made available under the terms of the License 

"Eclipse Public License v1.0" which accompanies this distribution, 

and is available at the URL "http://www.eclipse.org/legal/epl-v10.html". -->

<!-- Initial Contributors:

    Nokia Corporation - initial contribution.

Contributors: 

-->

<!DOCTYPE concept

  PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">

<concept id="GUID-60B979FB-43BD-480E-8E17-1D3DA2002CB1" xml:lang="en"><title>Slider

pop-up</title><prolog><metadata><keywords/></metadata></prolog><conbody>

<p>The Slider pop-up component can be used for situations where a value is

changed with a slider, for example when changing zoom or volume level. The

common Slider pop-up component has a set of elements from which to select

and modify the slider in question, for example, value ranges, whether to have

current value as text included, or additional icons related to the slider.</p>

<p>For application specific slider pop-up the application may define ways

to open the pop-up. For common pop-up such as Volume Control, ways to open

the pop-up are defined. The Slider pop-up has default time-out after which

it disappears, but for good reason this time-out can be overridden by the

application. </p>

<p>Instead of using the pop-up, the application may define the slider to be

always visible (fixed in the layout). If slider is fixed in the layout, the

pop-up is not shown.</p>

<p>The orientation of the slider pop-up can be either horizontal or vertical.

The orientation and location are always the same across applications, unless

application uses the slider as fixed in the layout. Value growth direction

in Slider is always either up or right depending on the Slider orientation

in the UI. </p>

<table id="GUID-7A441CF1-6B7B-43EF-9E31-AF45034B49FB"><title>Default touch

events for the Slider pop-up</title>

<tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/>

<thead>

<row>

<entry valign="top"><p>User action</p></entry>

<entry valign="top"><p>State change</p></entry>

<entry valign="top"><p>Feedback</p></entry>

</row>

</thead>

<tbody>

<row>

<entry><p>Touch down (on slider)</p></entry>

<entry><p>Slider thumb is moved to the nearest slider step position on the

slider. Value is changed accordingly.</p><p>If touch down event is performed

in the middle of two slider step positions, the slider thumb is moved towards

the greater (larger) value.</p></entry>

<entry><p>Tactile: No touch down effect. Sensitive slider effect and audio

feedback is provided when the thumb moves.</p></entry>

</row>

<row>

<entry><p>Touch down (on slider thumb)</p></entry>

<entry><p>Slider thumb is activated and can be moved.</p></entry>

<entry><p>Tactile: Sensitive slider effect is provided with touch down.</p></entry>

</row>

<row>

<entry><p>Touch release</p></entry>

<entry><p>No effect</p></entry>

<entry><p>Tactile: Sensitive slider effect is provided with the touch release

(on slider thumb).</p></entry>

</row>

<row>

<entry><p>Touch down and hold (on slider)</p></entry>

<entry><p>Moves the thumb step by step to the place where touched down.</p></entry>

<entry><p>Tactile: Hold slider effect is given with long touch on the slider.

Effect is bound to the steps. If there are more than 15 steps, then smooth

slider effect is given instead.</p></entry>

</row>

<row>

<entry><p>Touch down and hold (on slider thumb)</p></entry>

<entry><p>Inactive</p></entry>

<entry><p>Tactile: No effect</p></entry>

</row>

<row>

<entry><p>Touch down and move</p></entry>

<entry><p>Slider thumb is moved along with the touch event. It moves step

by step via its possible positions. Value is changing accordingly. </p><p>If

touch release in the middle of two slider step positions, the slider thumb

is moved towards the greater (larger) value. </p><p><note>The slider control

area is the entire main pane area.</note></p></entry>

<entry><p>Tactile: Smooth slider effect is provide when dragging from the

thumb. </p><p>Smooth feedback can be increasing and decreasing when there

is a meaning to use this kind of feature, for example, in volume and zoom

slider.</p></entry>

</row>

<row>

<entry><p>Touch down and cancel (slider thumb)</p></entry>

<entry><p>Slider thumb is moved to the nearest slider step position where

it was when the touch left the slider control area.</p></entry>

<entry><p>Tactile: No feedback is provide with touch release after drag outside.</p></entry>

</row>

</tbody>

</tgroup>

</table>

<p/>

<table id="GUID-905C951F-5C5D-431E-84E9-384EFDBE3192"><title>Default touch

events for the Minus / Plus indicators.</title>

<tgroup cols="3"><colspec colname="col1" colwidth="0.80*"/><colspec colname="col2" colwidth="1.01*"/><colspec colname="col3" colwidth="1.19*"/>

<thead>

<row>

<entry valign="top"><p>User action</p></entry>

<entry valign="top"><p>State change</p></entry>

<entry valign="top"><p>Feedback</p></entry>

</row>

</thead>

<tbody>

<row>

<entry><p>Touch down</p></entry>

<entry><p>Slider thumb moves either up or down. Direction depends on which

indicator has been touched.</p></entry>

<entry><p>Tactile: Sensitive button effect and audio feedback is provided

with the touch down event.</p></entry>

</row>

<row>

<entry><p>Touch down and hold (keep touch down)</p></entry>

<entry><p>This action performs a “key repeat”, similar to many single touch

down and release on the indicator.</p></entry>

<entry><p>Tactile: Sensitive button effect provided with steps.</p></entry>

</row>

<row>

<entry><p>Touch release</p></entry>

<entry><p>Slider thumb stops in its position</p></entry>

<entry><p>Tactile: Sensitive button effect given with touch release event.</p></entry>

</row>

<row>

<entry><p>Touch down and move outside and release the control area</p></entry>

<entry><p>Slider’s thumb remains in the position, where it was, before moving

out of both pop-up and indicator area.</p></entry>

<entry><p>Tactile: No effect</p></entry>

</row>

</tbody>

</tgroup>

</table>

<section id="GUID-1B1C405D-61EF-4E54-8704-23EA67FEC11A"><title>Using

slider pop-ups in C++ applications</title><p>The API to use for the slider

pop-up is the Slider API.</p><p>To use a slider pop-up in your application,

create an instance of the class <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html" format="application/java-archive"><codeph>CAknSlider</codeph></xref>.</p><p>Use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#522ccd7bdb0fac6707734578e2d4ed7b" format="application/java-archive"><codeph>CAknSlider::SetValueL()</codeph></xref> to set the slider handle's position.

To set the range of acceptable values, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#e6e3b16a15f653eb9fc5b207f7852857" format="application/java-archive"><codeph>CAknSlider::SetRange()</codeph></xref>. To set the step size, use

the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#f72ea3d251c686948dfea1dbcf9be170" format="application/java-archive"><codeph>CAknSlider::SetStepSize()</codeph></xref>.</p><p>To set the texts for the minimum and maximum values, use the

methods <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#0359150c9fd3d2390de7c0dd6f7d6063" format="application/java-archive"><codeph>CAknSlider::SetMinimumTextL()</codeph></xref> and <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#882ca8ea40249fd2636748a116370fed" format="application/java-archive"><codeph>CAknSlider::SetMaximumTextL()</codeph></xref>. </p><p>To enable drag events in the slider, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#a3db99850ff68e4a80071de18befdcd1" format="application/java-archive"><codeph>CAknSlider::EnableDrag()</codeph></xref></p><p>To use a custom graphic in your slider component, use the method <xref href="jar:GUID-759FBC7F-5384-4487-8457-A8D4B76F6AA6.jar!/html/classCAknSlider.html#6161f69289ee1c7e0f47de8fee21ecee" format="application/java-archive"><codeph>CAknSlider::SetGraphics()</codeph></xref>.</p></section>

</conbody></concept>