HISE Logo Forum
    • Categories
    • Register
    • Login

    Snippet: Horizontal panel-based slider with hover fade in and out

    Scheduled Pinned Locked Moved Snippet Waiting Room
    added
    22 Posts 5 Posters 1.4k Views
    Loading More Posts
    • 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.
    • orangeO
      orange @d.healey
      last edited by orange

      @d-healey @Simon Thanks for sharing, I'll add these to the LAF collection

      develop Branch / XCode 13.1
      macOS Monterey / M1 Max

      HISEnbergH 1 Reply Last reply Reply Quote 1
      • HISEnbergH
        HISEnberg @orange
        last edited by

        @orange While you're at it, would you like to add this to the LAF collection? It's a linear slider but has a few useful tricks.

        Slider.gif

        HiseSnippet 1641.3ocsXssTabCFVFXSCNoGxL8APCStvPLlcWe.yvPvbvt3INfCljlLLLox6JaqxZImcWGvISlIuC89NSeK5k4QI22a5aP5u1c8dv1oPIM6E.R+m9zm90u9EMsEFTGGgMJU5SFMfhRcWkVi3t81qGgwQ02Gk5NJNVLSpcCRGztiFPbbnlnTol+mjJjZwEPde+816RrHbCZzTHzyDLCZCVelazrMq7HlkUMhI8DV+XZWnRcCAeOgkXH.l4UTQCHFmS5ROjHUaNEzADmdnTqnTxXihpsopEKVtP9xEJTpPohpcTy2oc4REZme8B4MKTTyHOJ0spZxbE1sbItTGTpE1UXNpUOwEb+.7LlCqsEUNPC0Bhr+z0DVlxknbVzd8XVlMGyRNHvKMi3r484reT4wLSV37Qb2O3I.GYQbBL0bIg27IfmVb3oFCdy.RohAoE7gz8TZYXyF3FIweurN2kZ2g.6Swghutn49suQYOAnA2MWex4zZ1vfPKxTRUMKtnp5xalN8Zqf25K3K8LsF2n9gU24XbqF02u5w3F6Talpk9KIx3UVKMjn43heMwF2xK0FuEd7xtK0cOQ+ABNLHyR9hWBVvQl.mCZv3TRbqLrovdXCgAwpgPb9NbyZTpUlkB0MoK16nFG8zieY8C2u9d6bxQGCdR8xZv2NUUUAxMzrb1ztLGf+qMja3xD7LKYZStvWX.3xh6LVX2rXQ6ec4zuM8hxvP.+BiyQ.zso+TCHllLdWPPd0fojNj.4Y+LyzsGHfbp9Y3Uw53UFqMnXZL7s1Z3ZvYWraOJ1ul.tMbFsqsXH2zSit4bj7m7LbFYjYtz99C0.BvWiNfKNVZA07XpgKg20hlg.IV47RrBBzdDKigV.ohsDcI1L2d8YF3N1zWMjxMFAzn0Ppmxx0PeFuFHBPut5l3noIWFNM7ESRji1Jz3UvOl31K2.wEYFa3ZiE5Qr47BZLP9L4XbctIyf.Gjwx8kvPXACdtGepdF9AgL+ClfvWIxyalv1Cnrt8b8bP9y1bJ5cxbnP9cbBRFO.jEG7KxoZRXnWL7OiBRVrdBxOX6AGt+f6.qtSnW5FhPWXvthKGmzTb8MmTTH90KNkLIu3yOqlzSqg0mR4W3wAZwIwUmHHqhKFr494y.0WNTkYlBd5XrkMLvYS.trIC5YArFNj1jDDTdnM0Z5cKue4j6hd.fVdyoyCk15OMqCNST54C2BqAotK6I5sd+T9kvNfepx6BzYNSwPHw5DQKWaflh4l077RVr1x.KtD97CdyRArw679I0xgdEgv6vg2Q8H+56MoyB7Uh8tlBGlrtDX7+YxMbuRlNuiEqKmZJARlDvJah3jEujATM1lZJK29NYBseMR4FwTEmCKxJ0Kc5wEQwB9gBW5Q7Ld0QSC7yjh5zYlxjWFXKrrn1yTrrcG6+MCyvG1uM0NqessPEgqzS1mfxmuOg3swX3e2TLEE75bl6QCn7OWyMnfKzfdJlO.Uve450Qw2EzQgOkhXPiC2R4QGdztHO7F0I28+.5ZX62mXJsDN4iO4O+8suNN41JACha86+qm7wsQOs99DWhr4nf0DrNGPscYRJL09zWCsl52pzhJ6ScN2ULvaQGb2ODtqZYeYzRtXkQQCzqbgLiNZhSpzyKoN9L8i2778+.bgSrgUZ2cbiv2Uofd4RZkKVXccTrhY9RzzTKqoqUJlDeAaTXi7kVWSG0WXBKBEklDNBZjXPK1anw6ZWd9A58W49sYCDVDaYJPHEr30d2KF5eXLtnxuLIW7ho3hWTQhg3fe8x55ExmWeVqpRqquQQzD7SwR5EJUdiDX+NWcRSDnwuJFneuUEG2QVduE5.gM6MP9CwB0mYZZQGWqIB+eb63vbwaoo8GeRNOT3p69Lapgu5I7kCbn7D+5c9GVSxRevdRV58mVAMcS9vyKDlxtjR9lC4KyBDHCc7F8kMyygUvn34.+u8PjqKDumRSlqQuYiw4lAFgiweMvXvy29Vkpc5.6SQ.bAkZO+qya0PPeGtvcyvso1LXyW4vg8aAYNFTH5bNbOLLWp4jkh8GqJGKYfVTto2fOAeAB0jiSEHTarPTehgs3kF90OkOP71dy.Xh68X5EUdrbLVaxR2HYVN6kFFIc0TFpeSML+M0vB2TCKdSMrzM0v0uoFV9pMT9uSXmgth99GaPnG2rp28boRUkKeTgW1J5evvlv+T
        orangeO 1 Reply Last reply Reply Quote 1
        • orangeO
          orange @HISEnberg
          last edited by

          @HISEnberg Thanks, Ok I'll let you know when it is added.

          develop Branch / XCode 13.1
          macOS Monterey / M1 Max

          1 Reply Last reply Reply Quote 0
          • orangeO
            orange
            last edited by

            Ok, These have been added to the collection.

            Link Preview Image
            hise_laf_library/Examples.md at main · christoph-hart/hise_laf_library

            A public library of HISE UI Customizations (LookAndFeel) with contributions from various developers - hise_laf_library/Examples.md at main · christoph-hart/hise_laf_library

            favicon

            GitHub (github.com)

            develop Branch / XCode 13.1
            macOS Monterey / M1 Max

            SimonS 1 Reply Last reply Reply Quote 4
            • SimonS
              Simon @orange
              last edited by

              I started the slider as LaF but moved to a panel when I couldn't figure out an elegant way to do the animation, interesting that that's the one part not achievable with LaF.

              Coming from Kontakt, the ability to have smooth transitions and (gasp) actual hover states for all controls is a huge win. The average user probably can't articulate the difference, but I think in testing a UI with smoothed hover states would get more positive feedback. When trying to sell something new to a group of people who have been used to Kontakt for potentially decades, I'm convinced this kind of UI polish can help make a HISE library stand out as better in every way than what people have been used to.

              I believe I used a separate label so the text wouldn't be part of the hover target.

              d.healeyD orangeO HISEnbergH 3 Replies Last reply Reply Quote 1
              • d.healeyD
                d.healey @Simon
                last edited by

                @Simon said in Snippet: Horizontal panel-based slider with hover fade in and out:

                I believe I used a separate label so the text wouldn't be part of the hover target.

                You could exclude it in the mouse callback by checking the event.y position.

                Libre Wave - Freedom respecting instruments and effects
                My Patreon - HISE tutorials
                YouTube Channel - Public HISE tutorials

                1 Reply Last reply Reply Quote 0
                • orangeO
                  orange @Simon
                  last edited by

                  @Simon said in Snippet: Horizontal panel-based slider with hover fade in and out:

                  interesting that that's the one part not achievable with LaF.

                  I think it can be done with recently added css

                  develop Branch / XCode 13.1
                  macOS Monterey / M1 Max

                  d.healeyD SimonS 2 Replies Last reply Reply Quote 1
                  • d.healeyD
                    d.healey @orange
                    last edited by

                    @orange good idea

                    Libre Wave - Freedom respecting instruments and effects
                    My Patreon - HISE tutorials
                    YouTube Channel - Public HISE tutorials

                    orangeO 1 Reply Last reply Reply Quote 1
                    • HISEnbergH
                      HISEnberg @Simon
                      last edited by

                      @Simon I think you could also use fadeComponent here instead of using a timer:

                      Link Preview Image
                      HISE | Docs

                      favicon

                      (docs.hise.audio)

                      d.healeyD 1 Reply Last reply Reply Quote 0
                      • d.healeyD
                        d.healey @HISEnberg
                        last edited by

                        @HISEnberg That will fade the whole panel, not just the circle.

                        Libre Wave - Freedom respecting instruments and effects
                        My Patreon - HISE tutorials
                        YouTube Channel - Public HISE tutorials

                        1 Reply Last reply Reply Quote 0
                        • orangeO
                          orange @d.healey
                          last edited by orange

                          @d-healey @Simon

                          It would be great if CSS and LAF could be used at the same time.

                          HiseSnippet 1278.3ocsW0raiTDDtmjLKXS1UDId.ZhX0ZuJNq+KNIFEsdcRLazlervKQHgPqZOSaOs7Lca0S6DaVgXuwItvEtxqPdC3BBIDbhC7NvItyAS0yLNiMwgDakcTlnzUWec8U+jpqotTXQ88ERjQxWNnKEYrrYiAbkytNDFGcvdHiGXdDwWQk3PQUGzk36SsQFFK9IZAFIVBE772OsJwkvsnwhPnSELK5gLOlJVZ8Juf45ViXSeIyaLsKV4.KAeWgqnGvmEMyh5Rr5PZSOlnUaASzyI9NHiGaleysyUpY9r42t4lzhz7sxQKzr0l14xVHaQR9sJTpEoTNx1Hi6suMSIjMTDE0GYrTUg8fFNhy4gF3TlOqoKUuHGpAX4Pw0Dt1ZWTKEsqCy0t9n.kOBNk5wgsECCaef4QLa1kxiCeuevF3XDiG.MVXR5s3DzK23zK6XzaJTxXLJsTHkVwrgkj0UEuilOum4AbHa1h.4owoRntnE94EM2U.ZvUq6Q5PqIgEWhHUorYWCC+J8GmLIjq7U3yHRrKoEdG7HXVRJ3MGJrHtGJDcdF2tFk5lRC4IOAuaiF3VBIV4Pwmy3eXR.759TvFtLNsgZfKsgCkpRsZx08C3juKylJS95jIZBkCskhdb6LVPvPVVa8TYxzrcXQCXhDdDYaFuLNWot8wY61GD0THgCHijXy54WFuQ1GFHreFeGhs37xZ0v4g2hvqrcSRJvIi9Y87vg90ImjKkcDmExnKsVA.ZNs0tdVxTTuXdpjDtOSwD.Zhqq1R9XJwmlgwmhEK2jBQMp1lVgw4x3G8H3bNmYqbJi8H8SkKa1ybVCCwcK8e+P7iir7YD2dzzo0lMlbkCc07arwZidARr03wvBWe3CX3pSVDzgKZ5CkAewn5f1T0tButBNrH0pu.1N2poWKI9pOWOh7yLhByLhhql9KAOABuo5fY7PGIcxDczkkWoLFJW09c3SqdbKcJDK3GKTzS3oRqyPPvA+e2pUqotmlVRgqKUN0s0MHk+e.Sw640jJWCGliGoHzDXxNKlWemkwa7EUaMlhB9Abl5jtT900NDEEZ0MFiXEnpJnGzCh5A0HnJFwfVMuiYPo.JfvQM++wt67WOEcqAmeBvUR9m+wL.tvDfeyNI+kY.bwoP6O6f8HJhtGbTf.BNcoRESG2M1idFbCXXG4Dl6Q86nDcChTQEgHi6eiwp9WdIYkSqL.xlFf8P95lk5aretPx9Jv1DWjOj4dIsuppnutq9nNi.968MWTcn9Hbnr1NwWG+lZUh6Lo0a4kGFnWrz7ZwqrxJ+iVrBN8XkGNLT4f1PWdl+TyJ9Tt8o5X0I78jj1.YV.MlOu7MlhupO+CytOegysyme8u8QSymqTY3r3yyhCVXJN3uOGNX0u8V4fC+NzcPRcVbvhSwAWxXlcvpe+E2NGD8q2EN3UGiBFfSX2yknlbpN8ruQa.MjmXTJ83R561GL9rw2Yi5cao3Jl0YJKmoywElBGgNXuM3Xz.x22b+VsnVpXBtjYsO+syzvnOUzSw3sOhnjLnhx73ddMfTuEErNmSc0WHB8izPCVmUuVGAZ.csBVnqPh1LmdsQzl4FsIxiXIEuxJ7lC8H3uafDfS7fOWIA7cSvZ7j2zE73AeQvqrrl7ntBv7yKvByKvhyKvMlWfklWfaNu.25lAp+fsm0SI7B+2FD5n56GbEugw9bBTAFTsh9W.pNwSE

                          Dec-27-2024 17-08-57.gif

                          develop Branch / XCode 13.1
                          macOS Monterey / M1 Max

                          d.healeyD S 2 Replies Last reply Reply Quote 4
                          • SimonS
                            Simon @orange
                            last edited by

                            @orange These are super ♥ Getting easing for free is really useful too.

                            1 Reply Last reply Reply Quote 0
                            • d.healeyD
                              d.healey @orange
                              last edited by

                              @orange said in Snippet: Horizontal panel-based slider with hover fade in and out:

                              It would be great if CSS and LAF could be used at the same time.

                              I think it's on Christoph's radar.

                              Libre Wave - Freedom respecting instruments and effects
                              My Patreon - HISE tutorials
                              YouTube Channel - Public HISE tutorials

                              1 Reply Last reply Reply Quote 1
                              • S
                                Seth Munson @orange
                                last edited by

                                @orange said in Snippet: Horizontal panel-based slider with hover fade in and out:

                                Dec-27-2024 17-08-57.gif

                                Would anyone be able to help me reverse the slider direction on these? I really love how they look and feel (no pun intended lol) but I've exhausted all my CSS knowledge and even had chatgpt make some suggestions to no success. best I can do in the gif

                                thanks for any help!

                                CSS LPF.gif

                                orangeO 1 Reply Last reply Reply Quote 0
                                • orangeO
                                  orange @Seth Munson
                                  last edited by

                                  @Seth-Munson Post a minimal Snippet

                                  develop Branch / XCode 13.1
                                  macOS Monterey / M1 Max

                                  S 1 Reply Last reply Reply Quote 0
                                  • S
                                    Seth Munson @orange
                                    last edited by

                                    @orange you got it! thanks

                                    HiseSnippet 1394.3ocsV0saaTDEd1jrkFCohf3AXTEUwtpI010MI3H.23jPsZRqUcovcUi2cVui7tyrLyrI1E0aQ7FvqCWwK.WxM7Hv8bAblYW6cciCEEQsrk7b9a9ly4LeyouT3QUJgD4T4ESSnHmOxcvTtNraHgwQ8NB4bK2yHJMUhyDc3zDhRQ8QNNq90FANquFx94O+pCIQDtGsPDB8RAyidJKloKj1uySXQQmP7oufEWx5Vc54I3cEQhT.Oq5VGkP7FSFQeJwX1JtnGSTgHm6552nUif88H6teiVM87Zt+dM+787njf.5tMd3ds1OnU.wqdSjyMN1moExAZhlpPNqcnve5fPwE7rM3kLEaXD0rnAZ.ryYhOQD4aNhFontgrH+9yRTJDDk9EosUyRaep6YLe1b4EouO1p.W3Q4DnyJKBuUW.dMJCu5kf2RfjSIHsVFj1zcfmjknKzXvyG51iCUSH8PW.JY1hV4Vq41U.Vv06DSFSOQBKl6Q0V0qeObi50qcPkJPsRowmSj3mvECaf+B7LGGQ0cEwIBNrn5ssZuM3QgCiAQcGLnjKdRJjBNU3QhNUHF+Ht+ITZTUy9T492G2q2y6h8D9TLSgGRTLvtnoXcHEqflCLQY+uPxFw3jHrhyRRnZ7ELcnUCwGRzLAGKBvaAVEpaiqevVXF2ptc6gz.gDhF0yZlVfUZhTiCjhXqIVm1A+H9TMz0h6gShHSK1fKX9v+XZ7P3jLVUoR9YbGEExeQLNcfdZDcPHkB4jJ6nr4aUDymJq7CUVeHzpORJR49a6AEZYaShp51aObT1EBHSrdLQBGu13F6lLAWOYBHZnPBAXaIwmkpZieX86XENYaUHwWbQaiY3lvuVvO4ngjpPAL+6Nsff9lJKhk1ghyyPz7cqUVHN3pAISSiKfoVR3Ja1tMFJSvF8.ElRTzsY7kftcuBzsmIVWFeypT.B8xZdZi2ZKvz4U0JX3isdzFGSlTE5WOO7dXnkwy7+6fuaNrOmDkRqUq1AXqKEmt1YfoIzsO6G.n8qkE5YIlGXxIVGWRQ3MULs7UrM+ldfK0Zm2eX6vqDjxy56D7mJzzmwqVyTBfnfeaUAAKUm4hjTDEQkKUsgoU9u4XUdZ7Pp7d3rjxLCA1jEonbuZJpxLn4klRFJ383L8yRn7qhWEkSFXnyxQEXp1RlcqbxrA1l.DC3r9.WaxEYA77WQp+icPeSuiHZxrv.QD1kDpTyLG.minmCuIkwQtt6QT0XsHAddYNkED5rMci7M8TxPZjcOuoq8+MPSJd15K6LsXQuNZ5DHBIteKgqY7QYbTVTaHUBfRj3BqvXQphh8YxbJmp1FXiQQz.cM7vTMvAk5MNijAnVhEmahHvYIRRDvULpgNyFGjseeNN9izNgTS3JiLToS3m7NSqSJ6ZoS3m0QYHxLSJ7Xfu80PFlDghY99Qz9hr68ysN4mAqoICXulVdPg3xyMzpCbIc9xe525nRCBXfDWW7ie8acv9EYmX3Y.y6XmHoeeJk6MEMiiDr5FarwF+pwvBJIizIWn9ciTEzO9Bn.cnXh4QOeZ.IMR+xE5f.DT3bSi2at4l+kQiozVDy+F9jMOykd5EdzW3mFQzKNIfYdobEljT4meMOwZHMmVNM8+13A+Wg3lt8YZuvkiwUVBFg6XuOvX9PUa3dLLQmmt.fq4dx289YBJzyEol6qmQzRay2SSiG.UZOJr6bNMxv84rhgkJaccyZSFX.k6aWXZHxU1vr1IWYiYJQwDOo3UdYbalw1toUBfItcD20gYsg032lTC9.WvXuxyawPcIGadcc7AWWGaccc7gWWG28553dWWG2+c6nYH+GkpEwYWaPny5er8QHGmi4DnCz1sh9G7AmLW.
                                    orangeO 1 Reply Last reply Reply Quote 0
                                    • orangeO
                                      orange @Seth Munson
                                      last edited by

                                      @Seth-Munson

                                      right: 0; makes it reverse. Just remove it, and it works.

                                      HiseSnippet 1392.3ocsV8raaaCFmJIpqwaoXYXO.DEqHNEMo1NtIsNXatwIY0nIsF0cY6VAkDkMgkH0HoRr6Puu2f8RrGhcZu.63try6ztuCaejR1RtwYcHXUPBP76e7G+993OxdRgOUoDRjSkWNIghb9H29S35gcFRXbT2CQN2x8ThRSk3LQGLIgnTz.jiyxekQfypqfrO+4Wd.Ihv8oEhPnyDLe5IrXltPZu1OkEEcLIf9RVbIqa1tquf2QDIRA7rraMTBweDY.8YDiYK4hdBQMD4bW2F68n5650nViG4sGsIsQXc5Ndg6ETu1N0ZRZ7vc1MjracxiPN23n.lVH6qIZpB4rxAhfI8GJtfmMAmwTLuHpYPcTeXlyDerHJvrDMRQcFxhB5MMQoPPT5Uj1VNKs8otmxBXyjWj99XqBbgGkSfNKMO7VdN3UuL7pUBdK.RNkfzJYPZc299RVhtPiAOenaWNTMCIPcpLTxrEszRq31Q.Vv0aGSFQOVBCl4Q0l0pcOb8Z01b+JUfZkRiOmHwOkK7pi+b7TGGP0cDwIBNLn5ssZuM3QgCi.Qc52ujK9RJjBNQ3ShNQHF8XdvwTZTUy7T492G2s6K5f8EATLSg8HJFXWzDrdHEqflCLQY+WHYCXbRDVwYIITM9BldnUCI.RzLAGKBwa.VMT2BWa+MvLtUcqVdzPgDhF02ZlVfUZhTiCkhXqIVm1F+X9DMz0h6hShHSJlfKXAveLM1CVIiTUpjuF2VQg7WDiS6qmDQ6OjRgbRksU17sJhEPkU99Jq5As5CjhTdvV9PgV1xjnpt0VdCx1P.YhUiIRX40BWe2jw3ZIiAQdBIDfsjj.VppE9A0tiU33sTCIAhKZYLC2.9ZBexAdjpPAL+c6lPPeSk4wRqghyyPzrYqYVH1+pAISSiKfoVR3Ja1tEFJSvDsiBSIJ5VL9BP2tWA51yDqKiuoUJ.g9YMOsvarw9UvvisHzBGSFWEZROe38vPehu4+6fuaNVOmDkR2byMy7nXE0JC.MfN7oe.HdXtcSSF6XxCVGWPh+MULs4UrM7l59kZmy6Irc0UBS4Y8ZB9yDZ5y4U2zj1gnfeaUggKTmYyiTDEQkKTsgcU9u4XUdZrGUdObVNYpg.Cx7zRtWMsTYVy7xQICE7tbl94IT9UwkhxI.LTX4nBLUaIvtUNAVeagGw.dpOv0lbQV.O6ji+3mZi95tGRzjogAhHLKITolYV.NGROGNGJiWbU2CopQZQBbjxLZJHzYS5Z4S5IDOZjcNuoq8+5nwEGU8EsmTLnaaMcLDgD2ugv0L9fLdIKpMDIgPIRbgUXrHUQwALYNMSUKqhwnHZndSrWpF3cR8GkQr.zIwhyMQD3oDIIBXaE0PgYiCx1tOCG+dZ6gTS3JiLToU3m7NSqiK6ZoU3m0VYHuL2N3I.G6qgLLIBEyBBhn8DY60mYcxOBVSS5ydMs7kChKeWglsg8nyF9C+ZaUZXHCj35hexqeqE1OKaGCT+lytNVR+tTJ2eBZJuHX0MVas09EigEzPFoiuP8aFoJne7kPA5.wXyAcAzPRZj9r45f.DT3bCi2qu95+kQiozVDy+FdxtCykNtENnWDjFQzye5u4NR4JLIoxG4ZNV0PTNobZ5+sqD7eEhq61io8GtXLtzBvHrG68AFyuH0ZtGEFB6NJ.3JtG+suet0D5EhTy90SIZos46Yow8gJsOElcNmFY39bVxvRkMtlYrICzmxCrCLMD4JqaF6jqr9TknXhuT7J+LtMyU0toUBfIt8ZsqB2uFFieaRM3A1fwdku+7g5RN13553NWWGadcc7AWWG28553dWWGe361QyE6ebpVDmssAgNs2Q1CgbbNhSfNPa2J5e.hUmbH

                                      develop Branch / XCode 13.1
                                      macOS Monterey / M1 Max

                                      1 Reply Last reply Reply Quote 2
                                      • First post
                                        Last post

                                      10

                                      Online

                                      1.7k

                                      Users

                                      11.9k

                                      Topics

                                      103.2k

                                      Posts