RangeSlider QML Type

Used to select a range of values by sliding two handles along a track. More...

• List of all members, including inherited members

Properties

• crossingEnabled : bool (since QtQuick.Controls 6.12)
• effectiveFirstValue : real (since QtQuick.Controls 6.12)
• effectiveSecondValue : real (since QtQuick.Controls 6.12)
• first
  • first.handle : Item
  • first.hovered : bool
  • first.implicitHandleHeight : real
  • first.implicitHandleWidth : real
  • first.position : real
  • first.pressed : bool
  • first.value : real
  • first.visualPosition : real
• from : real
• handlesCrossed : bool (since QtQuick.Controls 6.12)
• horizontal : bool (since QtQuick.Controls 2.3 (Qt 5.10))
• live : bool (since QtQuick.Controls 2.2 (Qt 5.9))
• orientation : enumeration
• second
  • second.handle : Item
  • second.hovered : bool
  • second.implicitHandleHeight : real
  • second.implicitHandleWidth : real
  • second.position : real
  • second.pressed : bool
  • second.value : real
  • second.visualPosition : real
• snapMode : enumeration
• stepSize : real
• to : real
• touchDragThreshold : real (since QtQuick.Controls 2.5 (Qt 5.12))
• vertical : bool (since QtQuick.Controls 2.3 (Qt 5.10))

Signals

• void first.moved() (since QtQuick.Controls 2.5)
• void handlesCrossedChanged() (since QtQuick.Controls 6.12)
• void second.moved() (since QtQuick.Controls 2.5)

Methods

• void first.decrease()
• void first.increase()
• void second.decrease()
• void second.increase()
• void setValues(real firstValue, real secondValue)
• real valueAt(real position) (since QtQuick.Controls 2.5 (Qt 5.12))

Detailed Description

RangeSlider is used to select a range specified by two values, by sliding each handle along a track.

In the example below, custom from and to values are set, and the initial positions of the first and second handles are set:

RangeSlider {
    from: 1
    to: 100
    first.value: 25
    second.value: 75
}

In order to perform an action when the value for a particular handle changes, use the following syntax:

first.onMoved: console.log("first.value changed to " + first.value)

The first.position and second.position properties are expressed as fractions of the control's size, in the range 0.0 - 1.0. The first.visualPosition and second.visualPosition properties are the same, except that they are reversed in a right-to-left application. The visualPosition is useful for positioning the handles when styling RangeSlider. In the example above, first.visualPosition will be 0.24 in a left-to-right application, and 0.76 in a right-to-left application.

For a slider that allows the user to select a single value, see Slider.

See also Customizing RangeSlider, Input Controls, and Focus Management in Qt Quick Controls.

Property Documentation

crossingEnabled : bool [since QtQuick.Controls 6.12]

This property determines whether the slider handles can cross each other.

When false (the default), the first handle cannot be moved past the second handle, and vice versa. The values are constrained such that first.value <= second.value for normal ranges, or first.value >= second.value for inverted ranges.

Use the handlesCrossed property to detect when handles have swapped.

The default value is false.

When crossing is disabled, if handles were crossed then handles values will be exchanged.

This property was introduced in QtQuick.Controls 6.12.

See also handlesCrossed, first.value, and second.value.

effectiveFirstValue : real [read-only, since QtQuick.Controls 6.12]

This property holds the value of the handle that was originally created as the "first" handle, regardless of whether handles have crossed.

When crossingEnabled is false or handles haven't crossed, this is equal to first.value. When handles have crossed, this represents the value of the handle in the visual "first" position (leftmost in horizontal, bottommost in vertical orientation).

This property was introduced in QtQuick.Controls 6.12.

See also effectiveSecondValue, first.value, handlesCrossed, and crossingEnabled.

effectiveSecondValue : real [read-only, since QtQuick.Controls 6.12]

This property holds the value of the handle in the visual "second" position (rightmost in horizontal, topmost in vertical orientation).

When crossingEnabled is false or handles haven't crossed, this is equal to second.value. When handles have crossed, this represents the value of the handle in the visual "second" position (rightmost in horizontal, topmost in vertical orientation).

This property was introduced in QtQuick.Controls 6.12.

See also effectiveFirstValue, second.value, handlesCrossed, and crossingEnabled.

first group

See also first.moved(), first.increase(), and first.decrease().

from : real

This property holds the starting value for the range. The default value is 0.0.

See also to, first.value, and second.value.

handlesCrossed : bool [read-only, since QtQuick.Controls 6.12]

This property holds whether the handles have crossed each other.

This property is only relevant when crossingEnabled is true. When handles cross, their internal roles swap to maintain the semantic meaning of first and second as lower and upper bounds respectively.

This property can be used to provide visual feedback when handles are in a crossed state.

This property was introduced in QtQuick.Controls 6.12.

See also crossingEnabled and handlesCrossedChanged().

horizontal : bool [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

This property holds whether the slider is horizontal.

This property was introduced in QtQuick.Controls 2.3 (Qt 5.10).

See also orientation.

live : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

This property holds whether the slider provides live updates for the first.value and second.value properties while the respective handles are dragged.

The default value is true.

This property was introduced in QtQuick.Controls 2.2 (Qt 5.9).

See also first.value and second.value.

orientation : enumeration

This property holds the orientation.

Possible values:

See also horizontal and vertical.

second group

See also second.moved(), second.increase(), and second.decrease().

snapMode : enumeration

This property holds the snap mode.

The snap mode determines how the slider handles behave with regards to the stepSize.

Possible values:

For visual explanations of the various modes, see the snapMode documentation of Slider.

See also stepSize.

stepSize : real

This property holds the step size. The default value is 0.0.

See also snapMode, first.increase(), and first.decrease().

to : real

This property holds the end value for the range. The default value is 1.0.

See also from, first.value, and second.value.

touchDragThreshold : real [since QtQuick.Controls 2.5 (Qt 5.12)]

This property holds the threshold (in logical pixels) at which a touch drag event will be initiated. The mouse drag threshold won't be affected. The default value is Application.styleHints.startDragDistance.

This property was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also QStyleHints.

vertical : bool [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

This property holds whether the slider is vertical.

This property was introduced in QtQuick.Controls 2.3 (Qt 5.10).

See also orientation.

Signal Documentation

This signal is emitted when either the first or second handle has been interactively moved by the user by either touch, mouse, or keys.

These signals were introduced in QtQuick.Controls 2.5.

See also first and second.

[since QtQuick.Controls 6.12] void handlesCrossedChanged()

This signal is emitted when the handles cross each other, changing the handlesCrossed property.

This signal was introduced in QtQuick.Controls 6.12.

See also crossingEnabled.

Method Documentation

void first.decrease()

Decreases the value of the handle by stepSize, or 0.1 if stepSize is not defined.

See also first.

void first.increase()

Increases the value of the handle by stepSize, or 0.1 if stepSize is not defined.

See also first.

void second.decrease()

Decreases the value of the handle by stepSize, or 0.1 if stepSize is not defined.

See also second.

void second.increase()

Increases the value of the handle by stepSize, or 0.1 if stepSize is not defined.

See also second.

void setValues(real firstValue, real secondValue)

Sets first.value and second.value with the given arguments.

If to is larger than from and firstValue is larger than secondValue, firstValue will be clamped to secondValue.

If from is larger than to and secondValue is larger than firstValue, secondValue will be clamped to firstValue.

This function may be necessary to set the first and second values after the control has been completed, as there is a circular dependency between firstValue and secondValue which can cause assigned values to be clamped to each other.

See also stepSize.

[since QtQuick.Controls 2.5 (Qt 5.12)] real valueAt(real position)

Returns the value for the given position.

This method was introduced in QtQuick.Controls 2.5 (Qt 5.12).

See also first.value, second.value, first.position, second.position, and live.