Custom Range Slider || Flat Style Range Slider

Adesh singh..
December 12, 2022


 

 

 RangeSlider.qml 

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtGraphicalEffects 1.0


RangeSlider {
     id: control
     first.value: 0.25
     second.value: 0.75

     property color checkedColor: "#3498DB"

     background: Rectangle {
         x: control.leftPadding
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 200
         implicitHeight: 10
         width: control.availableWidth
         height: implicitHeight
         radius: height / 2
         color: "#EBEDEF"

         Rectangle {
             x: control.first.visualPosition * parent.width
             width: control.second.visualPosition * parent.width - x
             height: parent.height
             color: control.checkedColor
             radius: height / 2

             layer.enabled: control.hovered | control.pressed
             layer.effect: DropShadow {
                 transparentBorder: true
                 color: control.checkedColor
                 samples: 8
             }
         }
     }

     first.handle: Rectangle {
         x: control.leftPadding + first.visualPosition * (control.availableWidth - width)
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 16
         implicitHeight: 16
         radius: implicitHeight / 2
         color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
//         color: first.pressed ? "#f0f0f0" : "#f6f6f6"
//         border.color: "#bdbebf"

         layer.enabled: control.hovered | control.pressed
         layer.effect: DropShadow {
             transparentBorder: true
             color: control.checkedColor
             samples: 10
         }

         ToolTip {
             parent: first.handle
             visible: first.pressed
             text: first.value.toFixed(1)
         }
     }

     second.handle: Rectangle {
         x: control.leftPadding + second.visualPosition * (control.availableWidth - width)
         y: control.topPadding + control.availableHeight / 2 - height / 2
         implicitWidth: 16
         implicitHeight: 16
         radius: implicitHeight / 2
         color: control.pressed ? Qt.darker(control.checkedColor, 1.2) : control.checkedColor
//         color: second.pressed ? "#f0f0f0" : "#f6f6f6"
//         border.color: "#bdbebf"

         layer.enabled: control.hovered | control.pressed
         layer.effect: DropShadow {
             transparentBorder: true
             color: control.checkedColor
             samples: 10
         }

         ToolTip {
             parent: second.handle
             visible: second.pressed
             text: second.value.toFixed(1)
         }
     }

 }