CODEWITHSUNDEEP
qtsliderqmlqtquick2
Marcus
Marcus

Reputation: 1930

Is there a Range Slider in QML?

I'm looking for an Range-Slider in QML. The goal is to select a range between a maximum and a minimum.

Example

Lets say I want to create an online shop. Implementing a search for products by price. We have products from 50€ up to 5000€ in stock. A customer only wants to get results for products between 500€ and 1000€. So I need this range slider

RangeSlider {
    id: priceSlider
    min: 50
    value1: 500
    value2: 1000
    max: 5000
}

Is there an available solution?

Upvotes: 1

Views: 2075

Answers (3)

Mitch
Mitch

Reputation: 24386

RangeSlider was added in Qt 5.6 under the Qt.labs.controls 1.0 import, and Qt 5.7 under the QtQuick.Controls 2.0 import. Here's an example from the documentation:

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

RangeSlider GIF

Old answer

No, there's not. It sounds like a useful control to have, though, so I've created a suggestion that it be added to the new Qt Quick Controls:

https://bugreports.qt.io/browse/QTBUG-48667

Upvotes: 3

Paul Masri-Stone
Paul Masri-Stone

Reputation: 3139

As of Qt 5.7, there is now QtQuick Controls 2 which includes RangeSlider.

Your code can be implemented as:

import QtQuick 2.7
import QtQuick.Controls 2.0 // or higher for newer features

RangeSlider {
    id: priceSlider
    from: 50
    first.value: 500
    second.value: 1000
    to: 5000
}

Upvotes: 0

Mohsen Zahraee
Mohsen Zahraee

Reputation: 3473

In qt5.6 and above there is to and from which equivalent to your min and max

import QtQuick 2.0
import Qt.labs.controls 1.0
RangeSlider
{
    id:range_slider

    from:min
    to:max
    stepSize: 5
}

Upvotes: 0

Related Questions