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 2.0k 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 @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

                          23

                          Online

                          1.7k

                          Users

                          11.9k

                          Topics

                          103.4k

                          Posts