Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QtQuick Slider: Style: Handle: mouse area size
Forum Updated to NodeBB v4.3 + New Features

QtQuick Slider: Style: Handle: mouse area size

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 1.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jseideman
    wrote on last edited by
    #1

    Current Problem: The Slider can't reach its full range:
    Original Problem: The slider handle needed a larger "mouseArea" for easier use on a touch screen.
    First Cut Solution: I met with Jens at the Digia booth at SF Developer days and he came up with this solution:
    A larger Item wrapped around the visible handle. This solved the problem, but now prevents the slider from using its full range (since the larger item is now considered to be the actual handle). I tried changing the min/max, but that didn't fix it. Here's the code:

    Slider
    {
    id: gammaSlider
    objectName: "gammaSlider"
    anchors
    {
    horizontalCenter: gammaValueLabel.horizontalCenter
    topMargin: labelMargin
    top: gammaValueLabel.bottom
    bottom: histogramContainer.bottom
    }

            orientation: Qt.Vertical
            minimumValue: 0
            maximumValue: transformController.mGetSliderMaxValue()
            stepSize: transformController.mGetSliderStepSize()
            style: SliderStyle {
                    groove: Rectangle {
                        color: kMainColor
                        implicitWidth: 16
                        implicitHeight: 7
                        radius: 4
                    }
                    //nesting yields extra MouseArea
                    handle: Item {
                        width: 56
                        height: 56
                        Rectangle {
                            anchors.centerIn: parent
                            color: "gray"
                            border.color: controlOrange
                            border.width: 2
                            width: 26
                            height: 26
                            radius: 13
                        }
                    }
            }
            onValueChanged:
            {
                onGammaSliderChanged(value);
            }
        }
    

    Jeff Seideman

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved