having fun with glimmerjs building a basic fluid slider in glimmer-playground sandbox

A_fluid_slider_link_to_glimmer-playground.txt

https://glimmer-playground.netlify.com/?app=JTVCJTdCJTIybmFtZSUyMiUzQSUyMkdsaW1tZXJBcHAlMjIlMkMlMjJ0ZW1wbGF0ZSUyMiUzQSU3QiUyMmZpbGVOYW1lJTIyJTNBJTIyc3JjJTJGdWklMkZjb21wb25lbnRzJTJGR2xpbW1lckFwcCUyRnRlbXBsYXRlLmhicyUyMiUyQyUyMnNvdXJjZVRleHQlMjIlM0ElMjIlM0NkaXYlM0UlNUNuJTIwJTIwJTNDRmx1aWRTbGlkZXIlNUNuJTIwJTIwJTIwJTIwJTQwdGl0bGUlM0QlNUMlMjJmbHVpZCUyMHNsaWRlciUyMHdpdGhvdXQlMjBzbGlkZXMlNUMlMjIlNUNuJTIwJTIwJTJGJTNFJTVDbiUyMCUyMCUzQ2hyJTJGJTNFJTVDbiUyMCUyMCUzQ0ZsdWlkU2xpZGVyJTVDbiUyMCUyMCUyMCUyMCU0MHRpdGxlJTNEJTVDJTIyZmx1aWQlMjBzbGlkZXIlMjB3aXRoJTIwb25lJTIwc2xpZGUlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTQwc2xpZGVzJTNEJTdCJTdCc2xpZGUlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTQwc2xpZGVzTGVuZ3RoJTNEJTdCJTdCc2xpZGUubGVuZ3RoJTdEJTdEJTVDbiUyMCUyMCUyRiUzRSU1Q24lMjAlMjAlM0NociUyRiUzRSU1Q24lMjAlMjAlM0NGbHVpZFNsaWRlciU1Q24lMjAlMjAlMjAlMjAlNDB0aXRsZSUzRCU1QyUyMmZsdWlkJTIwc2xpZGVyJTIwd2l0aCUyMG1hbnklMjBzbGlkZXMlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTQwc2xpZGVzJTNEJTdCJTdCc2xpZGVzJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCU0MHNsaWRlc0xlbmd0aCUzRCU3QiU3QnNsaWRlcy5sZW5ndGglN0QlN0QlNUNuJTIwJTIwJTJGJTNFJTVDbiUyMCUyMCUzQ2hyJTJGJTNFJTVDbiUyMCUyMCUzQ0ZsdWlkU2xpZGVyJTVDbiUyMCUyMCUyMCUyMCU0MHRpdGxlJTNEJTVDJTIyZmx1aWQlMjBzbGlkZXIlMjByYXRpbyUzQTElMkYxJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCU0MHNsaWRlcyUzRCU3QiU3QnNsaWRlcyU3RCU3RCU1Q24lMjAlMjAlMjAlMjAlNDBzbGlkZXNMZW5ndGglM0QlN0IlN0JzbGlkZXMubGVuZ3RoJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCU0MHJhdGlvJTNEJTdCJTdCcmF0aW9fMV8xJTdEJTdEJTVDbiUyMCUyMCUyRiUzRSU1Q24lMjAlMjAlM0NociUyRiUzRSU1Q24lMjAlMjAlM0NGbHVpZFNsaWRlciU1Q24lMjAlMjAlMjAlMjAlNDB0aXRsZSUzRCU1QyUyMmZsdWlkJTIwc2xpZGVyJTIwcmF0aW8lM0E0JTJGMyU1QyUyMiU1Q24lMjAlMjAlMjAlMjAlNDBzbGlkZXMlM0QlN0IlN0JzbGlkZXMlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTQwc2xpZGVzTGVuZ3RoJTNEJTdCJTdCc2xpZGVzLmxlbmd0aCU3RCU3RCU1Q24lMjAlMjAlMjAlMjAlNDByYXRpbyUzRCU3QiU3QnJhdGlvXzRfMyU3RCU3RCU1Q24lMjAlMjAlMkYlM0UlNUNuJTIwJTIwJTNDaHIlMkYlM0UlNUNuJTIwJTIwJTNDRmx1aWRTbGlkZXIlNUNuJTIwJTIwJTIwJTIwJTQwdGl0bGUlM0QlNUMlMjJmbHVpZCUyMHNsaWRlciUyMHJhdGlvJTNBMyUyRjIlNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTQwc2xpZGVzJTNEJTdCJTdCc2xpZGVzJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCU0MHNsaWRlc0xlbmd0aCUzRCU3QiU3QnNsaWRlcy5sZW5ndGglN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTQwcmF0aW8lM0QlN0IlN0JyYXRpb18zXzIlN0QlN0QlNUNuJTIwJTIwJTJGJTNFJTVDbiUyMCUyMCUzQ2hyJTJGJTNFJTVDbiUyMCUyMCUzQ0ZsdWlkU2xpZGVyJTVDbiUyMCUyMCU0MHRpdGxlJTNEJTVDJTIyZmx1aWQlMjBzbGlkZXIlMjByYXRpbyUzQTE2JTJGMTAlNUMlMjIlNUNuJTIwJTIwJTQwc2xpZGVzJTNEJTdCJTdCc2xpZGVzJTdEJTdEJTVDbiUyMCUyMCU0MHNsaWRlc0xlbmd0aCUzRCU3QiU3QnNsaWRlcy5sZW5ndGglN0QlN0QlNUNuJTIwJTIwJTQwcmF0aW8lM0QlN0IlN0JyYXRpb18xNl8xMCU3RCU3RCU1Q24lMjAlMjAlMkYlM0UlNUNuJTIwJTIwJTNDaHIlMkYlM0UlNUNuJTIwJTIwJTNDRmx1aWRTbGlkZXIlNUNuJTIwJTIwJTIwJTIwJTQwdGl0bGUlM0QlNUMlMjJmbHVpZCUyMHNsaWRlciUyMHJhdGlvJTNBMTYlMkY5JTVDJTIyJTVDbiUyMCUyMCUyMCUyMCU0MHNsaWRlcyUzRCU3QiU3QnNsaWRlcyU3RCU3RCU1Q24lMjAlMjAlMjAlMjAlNDBzbGlkZXNMZW5ndGglM0QlN0IlN0JzbGlkZXMubGVuZ3RoJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCU0MHJhdGlvJTNEJTdCJTdCcmF0aW9fMTZfOSU3RCU3RCU1Q24lMjAlMjAlMkYlM0UlNUNuJTNDJTJGZGl2JTNFJTVDbiU1Q24lM0NzdHlsZSUzRSU1Q24lMjAlMjAlNDBjaGFyc2V0JTIwJTVDJTIyVVRGLTglNUMlMjIlM0IlNUNuJTIwJTIwJTNBcm9vdCUyMCU3QiU1Q24lMjAlMjAlMjAlMjBmb250LXNpemUlM0ElMjAxcmVtJTNCJTVDbiU1Q24lMjAlMjAlMjAlMjAlNDBtZWRpYSUyMChtaW4td2lkdGglM0ElMjAyMHJlbSklMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwJTIwZm9udC1zaXplJTNBJTIwY2FsYygxcmVtJTIwJTJCJTIwKCgxdnclMjAtJTIwLjIwcmVtKSUyMColMjAxKSklM0IlNUNuJTIwJTIwJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAlMjAlMjAlNDBtZWRpYSUyMChtaW4td2lkdGglM0ElMjAxMjByZW0pJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMGZvbnQtc2l6ZSUzQSUyMDJyZW0lM0IlNUNuJTIwJTIwJTIwJTIwJTdEJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlciUyMCU3QiU1Q24lMjAlMjAlMjAlMjBwb3NpdGlvbiUzQSUyMHJlbGF0aXZlJTNCJTVDbiUyMCUyMCUyMCUyMGRpc3BsYXklM0ElMjBibG9jayUzQiU1Q24lMjAlMjAlMjAlMjBib3gtc2l6aW5nJTNBJTIwYm9yZGVyLWJveCUzQiU1Q24lMjAlMjAlMjAlMjBib3JkZXIlM0ElMjBzb2xpZCUyMDFweCUyMGJsYWNrJTNCJTVDbiUyMCUyMCUyMCUyMG1hcmdpbiUzQSUyMDAlMjBhdXRvJTNCJTVDbiUyMCUyMCUyMCUyMHBhZGRpbmclM0ElMjAwJTNCJTVDbiUyMCUyMCUyMCUyMGNvdW50ZXItcmVzZXQlM0ElMjBzbGlkZXJCdG4lM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19oZWFkZXIlMjAlN0IlNUNuJTIwJTIwJTIwJTIwdGV4dC1hbGlnbiUzQSUyMGNlbnRlciUzQiU1Q24lMjAlMjAlMjAlMjBmb250LXNpemUlM0ElMjAxLjVyZW0lM0IlNUNuJTIwJTIwJTIwJTIwbWFyZ2luJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwMXJlbSUyMDAlM0IlNUNuJTIwJTIwJTIwJTIwYm9yZGVyLWJvdHRvbSUzQSUyMHNvbGlkJTIwMXB4JTIwYmxhY2slM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19oZWFkZXIlMjAlM0UlMjBoMSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBmb250LXNpemUlM0ElMjBpbmhlcml0JTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fd3JhcHBlciUyMCU3QiU1Q24lMjAlMjAlMjAlMjBvdmVyZmxvdyUzQSUyMGhpZGRlbiUzQiU1Q24lMjAlMjAlMjAlMjBtYXJnaW4lM0ElMjAwJTNCJTVDbiUyMCUyMCUyMCUyMHBhZGRpbmclM0ElMjAwJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGVzJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBJTIwcmVsYXRpdmUlM0IlNUNuJTIwJTIwJTIwJTIwZGlzcGxheSUzQSUyMGZsZXglM0IlNUNuJTIwJTIwJTIwJTIwZmxleC1mbG93JTNBJTIwcm93JTIwbm93cmFwJTNCJTVDbiUyMCUyMCUyMCUyMGFsaWduLWl0ZW1zJTNBJTIwY2VudGVyJTNCJTVDbiUyMCUyMCUyMCUyMGp1c3RpZnktY29udGVudCUzQSUyMGZsZXgtc3RhcnQlM0IlNUNuJTIwJTIwJTIwJTIwbWFyZ2luJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjB0cmFuc2l0aW9uJTNBJTIwYWxsJTIwLjVzJTNCJTVDbiUyMCUyMCUyMCUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19zbGlkZSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBmbGV4JTNBJTIwMCUyMDAlMjBhdXRvJTNCJTVDbiUyMCUyMCUyMCUyMGRpc3BsYXklM0ElMjB0YWJsZSUzQiU1Q24lMjAlMjAlMjAlMjBtYXgtd2lkdGglM0ElMjAxMDAlMjUlM0IlNUNuJTIwJTIwJTIwJTIwbGlzdC1zdHlsZSUzQSUyMG5vbmUlM0IlNUNuJTIwJTIwJTIwJTIwbWFyZ2luJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBjb2xvciUzQSUyMHdoaXRlJTNCJTVDbiUyMCUyMCUyMCUyMHRleHQtc2hhZG93JTNBJTIwMCUyMC4yNXJlbSUyMC4yNXJlbSUyMGJsYWNrJTNCJTVDbiUyMCUyMCUyMCUyMGZvbnQtc2l6ZSUzQSUyMDJyZW0lM0IlNUNuJTIwJTIwJTIwJTIwZm9udC13ZWlnaHQlM0ElMjA2MDAlM0IlNUNuJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlMjAlM0UlMjBwJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGRpc3BsYXklM0ElMjB0YWJsZS1jZWxsJTNCJTVDbiUyMCUyMCUyMCUyMHZlcnRpY2FsLWFsaWduJTNBJTIwbWlkZGxlJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkIxKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIwcmVkJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkIyKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIwb3JhbmdlJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkIzKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIweWVsbG93JTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkI0KSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIwZ3JlZW4lM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19zbGlkZSUzQW50aC1jaGlsZCg3biUyQjUpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGJhY2tncm91bmQlM0ElMjBibHVlJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkI2KSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIwaW5kaWdvJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fc2xpZGUlM0FudGgtY2hpbGQoN24lMkI3KSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBiYWNrZ3JvdW5kJTNBJTIwdmlvbGV0JTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fZm9vdGVyJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHBvc2l0aW9uJTNBJTIwcmVsYXRpdmUlM0IlNUNuJTIwJTIwJTIwJTIwZGlzcGxheSUzQSUyMGZsZXglM0IlNUNuJTIwJTIwJTIwJTIwZmxleC1mbG93JTNBJTIwcm93JTIwbm93cmFwJTNCJTVDbiUyMCUyMCUyMCUyMGFsaWduLWl0ZW1zJTNBJTIwZmxleC1zdGFydCUzQiU1Q24lMjAlMjAlMjAlMjBqdXN0aWZ5LWNvbnRlbnQlM0ElMjBzcGFjZS1hcm91bmQlM0IlNUNuJTIwJTIwJTIwJTIwbWFyZ2luJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwLjVyZW0lM0IlNUNuJTIwJTIwJTIwJTIwdHJhbnNpdGlvbiUzQSUyMGFsbCUyMC41cyUzQiU1Q24lMjAlMjAlMjAlMjBib3JkZXItdG9wJTNBJTIwc29saWQlMjAxcHglMjBibGFjayUzQiU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMC5zbGlkZXJfX2NvdW50ZXJzJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGZsZXglM0ElMjAxJTIwMSUyMGF1dG8lM0IlNUNuJTIwJTIwJTIwJTIwcG9zaXRpb24lM0ElMjByZWxhdGl2ZSUzQiU1Q24lMjAlMjAlMjAlMjBkaXNwbGF5JTNBJTIwZmxleCUzQiU1Q24lMjAlMjAlMjAlMjBmbGV4LWZsb3clM0ElMjByb3clMjB3cmFwJTNCJTVDbiUyMCUyMCUyMCUyMGFsaWduLWl0ZW1zJTNBJTIwZmxleC1zdGFydCUzQiU1Q24lMjAlMjAlMjAlMjBqdXN0aWZ5LWNvbnRlbnQlM0ElMjBjZW50ZXIlM0IlNUNuJTIwJTIwJTIwJTIwbWFyZ2luJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwMCUzQiU1Q24lMjAlMjAlMjAlMjB0cmFuc2l0aW9uJTNBJTIwYWxsJTIwLjVzJTNCJTVDbiUyMCUyMCUyMCUyMHRleHQtYWxpZ24lM0ElMjBjZW50ZXIlM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19jb3VudGVyJTJDJTVDbiUyMCUyMC5zbGlkZXJfX2J1dHRvbiUyMCU3QiU1Q24lMjAlMjAlMjAlMjBmb250LXNpemUlM0ElMjAuNzVyZW0lM0IlNUNuJTIwJTIwJTdEJTVDbiU1Q24lMjAlMjAuc2xpZGVyX19jb3VudGVyJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHdpZHRoJTNBJTIwMnJlbSUzQiU1Q24lMjAlMjAlMjAlMjBoZWlnaHQlM0ElMjAycmVtJTNCJTVDbiUyMCUyMCUyMCUyMHBhZGRpbmclM0ElMjAuMTI1cmVtJTNCJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwLnNsaWRlcl9fY291bnRlciUzQSUzQWJlZm9yZSUyMCU3QiU1Q24lMjAlMjAlMjAlMjBjb3VudGVyLWluY3JlbWVudCUzQSUyMHNsaWRlckJ0biUzQiU1Q24lMjAlMjAlMjAlMjAlMkYqJTIwT24lMjBpbmNyJUMzJUE5bWVudGUlMjBsZSUyMGNvbXB0ZXVyJTIwc2VjdGlvbiUyMColMkYlNUNuJTIwJTIwJTIwJTIwY29udGVudCUzQSUyMGNvdW50ZXIoc2xpZGVyQnRuKSUzQiU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMC5zbGlkZXJfX2J1dHRvbiUyMCU3QiU1Q24lMjAlMjAlMjAlMjB3aWR0aCUzQSUyMDJyZW0lM0IlNUNuJTIwJTIwJTIwJTIwaGVpZ2h0JTNBJTIwMnJlbSUzQiU1Q24lMjAlMjAlMjAlMjBwYWRkaW5nJTNBJTIwLjEyNXJlbSUzQiU1Q24lMjAlMjAlN0QlNUNuJTNDJTJGc3R5bGUlM0UlNUNuJTIyJTdEJTJDJTIyY29tcG9uZW50JTIyJTNBJTdCJTIyZmlsZU5hbWUlMjIlM0ElMjJzcmMlMkZ1aSUyRmNvbXBvbmVudHMlMkZHbGltbWVyQXBwJTJGY29tcG9uZW50LnRzJTIyJTJDJTIyc291cmNlVGV4dCUyMiUzQSUyMmltcG9ydCUyMENvbXBvbmVudCUyMGZyb20lMjAnJTQwZ2xpbW1lciUyRmNvbXBvbmVudCclNUNuJTVDbihmdW5jdGlvbigpJTIwJTdCJTVDbiUyMCUyMCUyRiUyRiUyMGh0dHBzJTNBJTJGJTJGZGV2ZWxvcGVyLm1vemlsbGEub3JnJTJGZW4tVVMlMkZkb2NzJTJGV2ViJTJGRXZlbnRzJTJGcmVzaXplJTVDbiUyMCUyMCUyRiUyRiUyMHJlcXVlc3RBbmltYXRpb25GcmFtZSUyMCUyQiUyMGN1c3RvbUV2ZW50JTVDbiUyMCUyMGZ1bmN0aW9uJTIwdGhyb3R0bGUodHlwZSUyQyUyMG5hbWUlMkMlMjBvYmolMjAlM0QlMjB3aW5kb3cpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMCUyMCUyMHZhciUyMHJ1bm5pbmclMjAlM0QlMjBmYWxzZSU1Q24lMjAlMjAlMjAlMjAlMjAlMjB2YXIlMjBmdW5jJTIwJTNEJTIwZnVuY3Rpb24oKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBpZiUyMChydW5uaW5nKSUyMCU3QiUyMHJldHVybiUyMCU3RCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBydW5uaW5nJTIwJTNEJTIwdHJ1ZSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZnVuY3Rpb24oKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBvYmouZGlzcGF0Y2hFdmVudChuZXclMjBDdXN0b21FdmVudChuYW1lKSklNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcnVubmluZyUyMCUzRCUyMGZhbHNlJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU3RCklNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTdEJTVDbiUyMCUyMCUyMCUyMCUyMCUyMG9iai5hZGRFdmVudExpc3RlbmVyKHR5cGUlMkMlMjBmdW5jKSU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMHRocm90dGxlKCU1QyUyMnJlc2l6ZSU1QyUyMiUyQyUyMCU1QyUyMm9wdGltaXplZFJlc2l6ZSU1QyUyMiklNUNuJTdEKSgpJTVDbiU1Q25leHBvcnQlMjBkZWZhdWx0JTIwY2xhc3MlMjBleHRlbmRzJTIwQ29tcG9uZW50JTIwJTdCJTVDbiUyMCUyMHByaXZhdGUlMjBfbWFwU2xpZGVzJTIwJTNEJTIwKGl0ZW0lMkMlMjBpbmRleCklMjAlM0QlM0UlMjAoJTdCJTVDbiUyMCUyMCUyMCUyMHNyYyUzQSUyMCU2MC4lMkZhc3NldHMlMkZpbWFnZXMlMkZzbGlkZV8lMjQlN0JpbmRleCU3RC5wbmclNjAlMkMlNUNuJTIwJTIwJTIwJTIwYWx0JTNBJTIwJTYwc2xpZGUlMjAlMjMlMjQlN0JpbmRleCUyMCUyQiUyMDElN0QlNjAlNUNuJTIwJTIwJTdEKSU1Q24lNUNuJTIwJTIwc2xpZGVzJTIwJTNEJTIwbmV3JTIwQXJyYXkoNykuZmlsbChudWxsKS5tYXAodGhpcy5fbWFwU2xpZGVzKSU1Q24lNUNuJTIwJTIwc2xpZGUlMjAlM0QlMjBuZXclMjBBcnJheSgxKS5maWxsKG51bGwpLm1hcCh0aGlzLl9tYXBTbGlkZXMpJTVDbiU1Q24lMjAlMjByYXRpb18xXzElMjAlM0QlMjAoMSUyMCUyRiUyMDEpLnRvRml4ZWQoMiklNUNuJTIwJTIwcmF0aW9fNF8zJTIwJTNEJTIwKDQlMjAlMkYlMjAzKS50b0ZpeGVkKDIpJTVDbiUyMCUyMHJhdGlvXzNfMiUyMCUzRCUyMCgzJTIwJTJGJTIwMikudG9GaXhlZCgyKSU1Q24lMjAlMjByYXRpb18xNl85JTIwJTNEJTIwKDE2JTIwJTJGJTIwOSkudG9GaXhlZCgyKSU1Q24lMjAlMjByYXRpb18xNl8xMCUyMCUzRCUyMCgxNiUyMCUyRiUyMDEwKS50b0ZpeGVkKDIpJTVDbiU3RCU1Q24lMjIlN0QlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyRmx1aWRTbGlkZXIlMjIlMkMlMjJ0ZW1wbGF0ZSUyMiUzQSU3QiUyMmZpbGVOYW1lJTIyJTNBJTIyc3JjJTJGdWklMkZjb21wb25lbnRzJTJGRmx1aWRTbGlkZXIlMkZ0ZW1wbGF0ZS5oYnMlMjIlMkMlMjJzb3VyY2VUZXh0JTIyJTNBJTIyJTNDZGl2JTIwY2xhc3MlM0QlNUMlMjJzbGlkZXIlNUMlMjIlM0UlNUNuJTIwJTIwJTNDaGVhZGVyJTIwY2xhc3MlM0QlNUMlMjJzbGlkZXJfX2hlYWRlciU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlM0NoMSUzRSU3QiU3QiU0MHRpdGxlJTdEJTdEJTNDJTJGaDElM0UlNUNuJTIwJTIwJTNDJTJGaGVhZGVyJTNFJTVDbiU1Q24lMjAlMjAlM0NkaXYlMjBjbGFzcyUzRCU1QyUyMnNsaWRlcl9fd3JhcHBlciU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlM0N1bCU1Q24lMjAlMjAlMjAlMjAlMjAlMjBjbGFzcyUzRCU1QyUyMnNsaWRlcl9fc2xpZGVzJTVDJTIyJTVDbiUyMCUyMCUyMCUyMCUyMCUyMHN0eWxlJTNEJTVDJTIydHJhbnNmb3JtJTNBJTIwdHJhbnNsYXRlWCglN0IlN0JzbGlkZXNPZmZzZXQlN0QlN0RweCklNUMlMjIlNUNuJTIwJTIwJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCU3QiU3QiUyM2VhY2glMjAlNDBzbGlkZXMlMjBrZXklM0QlNUMlMjIlNDBpbmRleCU1QyUyMiUyMGFzJTIwJTdDc2xpZGUlN0MlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDbGklMjBjbGFzcyUzRCU1QyUyMnNsaWRlcl9fc2xpZGUlNUMlMjIlMjBzdHlsZSUzRCU1QyUyMndpZHRoJTNBJTIwJTdCJTdCc2xpZGVXaWR0aCU3RCU3RHB4JTNCJTIwaGVpZ2h0JTNBJTIwJTdCJTdCc2xpZGVIZWlnaHQlN0QlN0RweCU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlM0NwJTNFJTdCJTdCc2xpZGUuYWx0JTdEJTdEJTNDJTJGcCUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlM0MlMkZsaSUzRSU1Q24lMjAlMjAlMjAlMjAlN0IlN0JlbHNlJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUzQ2xpJTIwY2xhc3MlM0QlNUMlMjJzbGlkZXJfX3NsaWRlJTVDJTIyJTIwc3R5bGUlM0QlNUMlMjJ3aWR0aCUzQSUyMCU3QiU3QnNsaWRlV2lkdGglN0QlN0RweCUzQiUyMGhlaWdodCUzQSUyMCU3QiU3QnNsaWRlSGVpZ2h0JTdEJTdEcHglNUMlMjIlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTNDcCUzRU5vJTIwU2xpZGVzJTIwQXZhaWxhYmxlISUzQyUyRnAlM0UlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDJTJGbGklM0UlNUNuJTIwJTIwJTIwJTIwJTdCJTdCJTJGZWFjaCU3RCU3RCU1Q24lMjAlMjAlMjAlMjAlM0MlMkZ1bCUzRSU1Q24lMjAlMjAlM0MlMkZkaXYlM0UlNUNuJTVDbiUyMCUyMCUzQ2Zvb3RlciUyMGNsYXNzJTNEJTVDJTIyc2xpZGVyX19mb290ZXIlNUMlMjIlM0UlNUNuJTIwJTIwJTIwJTIwJTNDQnV0dG9uVmlzaWJsZSUyMCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlNDBhY3Rpb24lM0QlN0IlN0JhY3Rpb24lMjBwcmV2U2xpZGUlN0QlN0QlMjAlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTQwc2xpZGVzTGVuZ3RoJTNEJTdCJTdCJTQwc2xpZGVzTGVuZ3RoJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCUzRSU1Q24lMjAlMjAlMjAlMjAlMjAlMjBwcmV2JTVDbiUyMCUyMCUyMCUyMCUzQyUyRkJ1dHRvblZpc2libGUlM0UlNUNuJTIwJTIwJTIwJTIwJTVDbiUyMCUyMCU3QiU3QiUyM2lmJTIwJTQwc2xpZGVzTGVuZ3RoJTdEJTdEJTVDbiUyMCUyMCUyMCUyMCUzQ2RpdiUyMGNsYXNzJTNEJTVDJTIyc2xpZGVyX19jb3VudGVycyU1QyUyMiUzRSU1Q24lMjAlMjAlMjAlMjAlN0IlN0IlMjNlYWNoJTIwJTQwc2xpZGVzJTIwa2V5JTNEJTVDJTIyJTQwaW5kZXglNUMlMjIlMjBhcyUyMCU3Q3NsaWRlJTIwaW5kZXglN0MlN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTNDQnV0dG9uUGlja1NsaWRlJTIwJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU0MGFjdGlvbiUzRCU3QiU3QmFjdGlvbiUyMHBpY2tTbGlkZSUyMGluZGV4JTdEJTdEJTIwJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMCU0MGN1cnJlbnRJbmRleCUzRCU3QiU3QmN1cnJlbnRJbmRleCU3RCU3RCUyMCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjAlNDBzbGlkZUluZGV4JTNEJTdCJTdCaW5kZXglN0QlN0QlMjAlNUNuJTIwJTIwJTIwJTIwJTIwJTIwJTJGJTNFJTVDbiUyMCUyMCUyMCUyMCU3QiU3QiUyRmVhY2glN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTNDJTJGZGl2JTNFJTVDbiUyMCUyMCU3QiU3QiUyRmlmJTdEJTdEJTVDbiU1Q24lMjAlMjAlMjAlMjAlM0NCdXR0b25WaXNpYmxlJTIwJTVDbiUyMCUyMCUyMCUyMCUyMCUyMCU0MGFjdGlvbiUzRCU3QiU3QmFjdGlvbiUyMG5leHRTbGlkZSU3RCU3RCUyMCU1Q24lMjAlMjAlMjAlMjAlMjAlMjAlNDBzbGlkZXNMZW5ndGglM0QlN0IlN0IlNDBzbGlkZXNMZW5ndGglN0QlN0QlNUNuJTIwJTIwJTIwJTIwJTNFJTVDbiUyMCUyMCUyMCUyMCUyMCUyMG5leHQlNUNuJTIwJTIwJTIwJTIwJTNDJTJGQnV0dG9uVmlzaWJsZSUzRSU1Q24lMjAlMjAlM0MlMkZmb290ZXIlM0UlNUNuJTNDJTJGZGl2JTNFJTVDbiUyMiU3RCUyQyUyMmNvbXBvbmVudCUyMiUzQSU3QiUyMmZpbGVOYW1lJTIyJTNBJTIyc3JjJTJGdWklMkZjb21wb25lbnRzJTJGRmx1aWRTbGlkZXIlMkZjb21wb25lbnQudHMlMjIlMkMlMjJzb3VyY2VUZXh0JTIyJTNBJTIyaW1wb3J0JTIwQ29tcG9uZW50JTJDJTIwJTdCJTIwdHJhY2tlZCUyMCU3RCUyMGZyb20lMjAnJTQwZ2xpbW1lciUyRmNvbXBvbmVudCclNUNuJTVDbmV4cG9ydCUyMGRlZmF1bHQlMjBjbGFzcyUyMGV4dGVuZHMlMjBDb21wb25lbnQlMjAlN0IlNUNuJTIwJTIwJTQwdHJhY2tlZCUyMHNsaWRlV2lkdGglMjAlM0QlMjAwJTVDbiUyMCUyMCU0MHRyYWNrZWQlMjBjdXJyZW50SW5kZXglMjAlM0QlMjAwJTVDbiU1Q24lMjAlMjByYXRpbyUzQSUyMGFueSUyMCUzRCUyMCg1JTIwJTJGJTIwMSkudG9GaXhlZCgyKSU1Q24lNUNuJTIwJTIwJTQwdHJhY2tlZCgnc2xpZGVXaWR0aCcpJTVDbiUyMCUyMGdldCUyMHNsaWRlSGVpZ2h0KCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwY29uc3QlMjAlN0IlMjByYXRpbyUyMCUzRCUyMHRoaXMucmF0aW8lMjAlN0QlMjAlM0QlMjB0aGlzLmFyZ3MlNUNuJTIwJTIwJTIwJTIwcmV0dXJuJTIwKHRoaXMuc2xpZGVXaWR0aCUyMCUyRiUyMHJhdGlvKS50b0ZpeGVkKDIpJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwJTQwdHJhY2tlZCgnc2xpZGVXaWR0aCclMkMlMjAnY3VycmVudEluZGV4JyklNUNuJTIwJTIwZ2V0JTIwc2xpZGVzT2Zmc2V0KCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwcmV0dXJuJTIwLSh0aGlzLnNsaWRlV2lkdGglMjAqJTIwdGhpcy5jdXJyZW50SW5kZXgpJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwY29uc3RydWN0b3Iob3B0aW9ucyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwc3VwZXIob3B0aW9ucyklNUNuJTIwJTIwJTIwJTIwdGhpcy5yZXNpemUlMjAlM0QlMjB0aGlzLnJlc2l6ZS5iaW5kKHRoaXMpJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwZGlkSW5zZXJ0RWxlbWVudCgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHNldFRpbWVvdXQoKCklMjAlM0QlM0UlMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwJTIwdGhpcy5yZXNpemUoKSU1Q24lMjAlMjAlMjAlMjAlMjAlMjB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignb3B0aW1pemVkUmVzaXplJyUyQyUyMHRoaXMucmVzaXplKSU1Q24lMjAlMjAlMjAlMjAlN0QlMkMlMjAwKSU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMHdpbGxEZXN0cm95KCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ29wdGltaXplZFJlc2l6ZScpJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwcmVzaXplKGV2ZW50JTIwJTNEJTIwbnVsbCklMjAlN0IlNUNuJTIwJTIwJTIwJTIwdGhpcy5zbGlkZVdpZHRoJTIwJTNEJTIwdGhpcy5ib3VuZHMuZmlyc3ROb2RlJTVCJ2NsaWVudFdpZHRoJyU1RCU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMHByZXZTbGlkZSgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGNvbnN0JTIwcHJldkluZGV4JTIwJTNEJTIwdGhpcy5jdXJyZW50SW5kZXglMjAtJTIwMSU1Q24lMjAlMjAlMjAlMjBjb25zdCUyMG1heCUyMCUzRCUyMHRoaXMuYXJncy5zbGlkZXNMZW5ndGglMjAtJTIwMSU1Q24lMjAlMjAlMjAlMjBjb25zdCUyMHNsaWRlSW5kZXglMjAlM0QlMjAocHJldkluZGV4JTIwJTNFJTNEJTIwMCklMjAlM0YlMjBwcmV2SW5kZXglMjAlM0ElMjBtYXglNUNuJTVDbiUyMCUyMCUyMCUyMHRoaXMucGlja1NsaWRlKHNsaWRlSW5kZXgpJTVDbiUyMCUyMCU3RCU1Q24lNUNuJTIwJTIwcGlja1NsaWRlKHNsaWRlSW5kZXgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHRoaXMuY3VycmVudEluZGV4JTIwJTNEJTIwc2xpZGVJbmRleCU1Q24lMjAlMjAlN0QlNUNuJTVDbiUyMCUyMG5leHRTbGlkZSgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMGNvbnN0JTIwbmV4dEluZGV4JTIwJTNEJTIwdGhpcy5jdXJyZW50SW5kZXglMjAlMkIlMjAxJTVDbiUyMCUyMCUyMCUyMGNvbnN0JTIwbWF4JTIwJTNEJTIwdGhpcy5hcmdzLnNsaWRlc0xlbmd0aCUyMC0lMjAxJTVDbiUyMCUyMCUyMCUyMGNvbnN0JTIwc2xpZGVJbmRleCUyMCUzRCUyMChuZXh0SW5kZXglMjAlM0MlM0QlMjBtYXgpJTIwJTNGJTIwbmV4dEluZGV4JTIwJTNBJTIwMCU1Q24lNUNuJTIwJTIwJTIwJTIwdGhpcy5waWNrU2xpZGUoc2xpZGVJbmRleCklNUNuJTIwJTIwJTdEJTVDbiU3RCU1Q24lMjIlN0QlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyQnV0dG9uVmlzaWJsZSUyMiUyQyUyMnRlbXBsYXRlJTIyJTNBJTdCJTIyZmlsZU5hbWUlMjIlM0ElMjJzcmMlMkZ1aSUyRmNvbXBvbmVudHMlMkZCdXR0b25WaXNpYmxlJTJGdGVtcGxhdGUuaGJzJTIyJTJDJTIyc291cmNlVGV4dCUyMiUzQSUyMiU3QiU3QiUyM2lmJTIwaXNWaXNpYmxlJTdEJTdEJTVDbiUyMCUyMCUzQ2J1dHRvbiUyMGNsYXNzJTNEJTVDJTIyc2xpZGVyX19idXR0b24lNUMlMjIlMjBvbmNsaWNrJTNEJTdCJTdCJTQwYWN0aW9uJTdEJTdEJTNFJTVDbiUyMCUyMCUyMCUyMCU3QiU3QnlpZWxkJTdEJTdEJTVDbiUyMCUyMCUzQyUyRmJ1dHRvbiUzRSU1Q24lN0IlN0IlMkZpZiU3RCU3RCU1Q24lMjIlN0QlMkMlMjJjb21wb25lbnQlMjIlM0ElN0IlMjJmaWxlTmFtZSUyMiUzQSUyMnNyYyUyRnVpJTJGY29tcG9uZW50cyUyRkJ1dHRvblZpc2libGUlMkZjb21wb25lbnQudHMlMjIlMkMlMjJzb3VyY2VUZXh0JTIyJTNBJTIyaW1wb3J0JTIwQ29tcG9uZW50JTJDJTIwJTdCJTIwdHJhY2tlZCUyMCU3RCUyMGZyb20lMjAlNUMlMjIlNDBnbGltbWVyJTJGY29tcG9uZW50JTVDJTIyJTNCJTVDbiU1Q25leHBvcnQlMjBkZWZhdWx0JTIwY2xhc3MlMjBleHRlbmRzJTIwQ29tcG9uZW50JTIwJTdCJTVDbiUyMCUyMCU0MHRyYWNrZWQoJ2FyZ3MnKSU1Q24lMjAlMjBnZXQlMjBpc1Zpc2libGUoKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjByZXR1cm4lMjB0aGlzLmFyZ3Muc2xpZGVzTGVuZ3RoJTIwJTNFJTIwMSU1Q24lMjAlMjAlN0QlNUNuJTdEJTNCJTIyJTdEJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMkJ1dHRvblBpY2tTbGlkZSUyMiUyQyUyMnRlbXBsYXRlJTIyJTNBJTdCJTIyZmlsZU5hbWUlMjIlM0ElMjJzcmMlMkZ1aSUyRmNvbXBvbmVudHMlMkZCdXR0b25QaWNrU2xpZGUlMkZ0ZW1wbGF0ZS5oYnMlMjIlMkMlMjJzb3VyY2VUZXh0JTIyJTNBJTIyJTNDYnV0dG9uJTVDbiUyMCUyMGNsYXNzJTNEJTVDJTIyc2xpZGVyX19jb3VudGVyJTVDJTIyJTVDbiUyMCUyMG9uY2xpY2slM0QlN0IlN0IlNDBhY3Rpb24lN0QlN0QlNUNuJTIwJTIwZGlzYWJsZWQlM0QlN0IlN0Jpc0Rpc2FibGVkJTdEJTdEJTVDbiUzRSUzQyUyRmJ1dHRvbiUzRSUyMiU3RCUyQyUyMmNvbXBvbmVudCUyMiUzQSU3QiUyMmZpbGVOYW1lJTIyJTNBJTIyc3JjJTJGdWklMkZjb21wb25lbnRzJTJGQnV0dG9uUGlja1NsaWRlJTJGY29tcG9uZW50LnRzJTIyJTJDJTIyc291cmNlVGV4dCUyMiUzQSUyMmltcG9ydCUyMENvbXBvbmVudCUyQyUyMCU3QiUyMHRyYWNrZWQlMjAlN0QlMjBmcm9tJTIwJTVDJTIyJTQwZ2xpbW1lciUyRmNvbXBvbmVudCU1QyUyMiUzQiU1Q24lNUNuZXhwb3J0JTIwZGVmYXVsdCUyMGNsYXNzJTIwZXh0ZW5kcyUyMENvbXBvbmVudCUyMCU3QiU1Q24lMjAlMjAlNDB0cmFja2VkKCdhcmdzJyklNUNuJTIwJTIwZ2V0JTIwaXNEaXNhYmxlZCgpJTIwJTdCJTVDbiUyMCUyMCUyMCUyMHJldHVybiUyMHRoaXMuYXJncy5jdXJyZW50SW5kZXglMjAlM0QlM0QlM0QlMjB0aGlzLmFyZ3Muc2xpZGVJbmRleCU1Q24lMjAlMjAlN0QlNUNuJTdEJTNCJTIyJTdEJTdEJTVE

ButtonPickSlide_component.ts

import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  @tracked('args')
  get isDisabled() {
    return this.args.currentIndex === this.args.slideIndex
  }
};

ButtonPickSlide_template.hbs

<button
  class="slider__counter"
  onclick={{@action}}
  disabled={{isDisabled}}
></button>

ButtonVisible_component.ts

import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  @tracked('args')
  get isVisible() {
    return this.args.slidesLength > 1
  }
};

ButtonVisible_template.hbs

{{#if isVisible}}
  <button class="slider__button" onclick={{@action}}>
    {{yield}}
  </button>
{{/if}}

FluidSlider_component.ts

import Component, { tracked } from '@glimmer/component'

export default class extends Component {
  @tracked slideWidth = 0
  @tracked currentIndex = 0

  ratio: any = (5 / 1).toFixed(2)

  @tracked('slideWidth')
  get slideHeight() {
    const { ratio = this.ratio } = this.args
    return (this.slideWidth / ratio).toFixed(2)
  }

  @tracked('slideWidth', 'currentIndex')
  get slidesOffset() {
    return -(this.slideWidth * this.currentIndex)
  }

  constructor(options) {
    super(options)
    this.resize = this.resize.bind(this)
  }

  didInsertElement() {
    setTimeout(() => {
      this.resize()
      window.addEventListener('optimizedResize', this.resize)
    }, 0)
  }

  willDestroy() {
    window.removeEventListener('optimizedResize')
  }

  resize(event = null) {
    this.slideWidth = this.bounds.firstNode['clientWidth']
  }

  prevSlide() {
    const prevIndex = this.currentIndex - 1
    const max = this.args.slidesLength - 1
    const slideIndex = (prevIndex >= 0) ? prevIndex : max

    this.pickSlide(slideIndex)
  }

  pickSlide(slideIndex) {
    this.currentIndex = slideIndex
  }

  nextSlide() {
    const nextIndex = this.currentIndex + 1
    const max = this.args.slidesLength - 1
    const slideIndex = (nextIndex <= max) ? nextIndex : 0

    this.pickSlide(slideIndex)
  }
}

FluidSlider_template.hbs

<div class="slider">
  <header class="slider__header">
    <h1>{{@title}}</h1>
  </header>

  <div class="slider__wrapper">
    <ul
      class="slider__slides"
      style="transform: translateX({{slidesOffset}}px)"
    >
    {{#each @slides key="@index" as |slide|}}
      <li class="slider__slide" style="width: {{slideWidth}}px; height: {{slideHeight}}px">
        <p>{{slide.alt}}</p>
      </li>
    {{else}}
      <li class="slider__slide" style="width: {{slideWidth}}px; height: {{slideHeight}}px">
        <p>No Slides Available!</p>
      </li>
    {{/each}}
    </ul>
  </div>

  <footer class="slider__footer">
    <ButtonVisible 
      @action={{action prevSlide}} 
      @slidesLength={{@slidesLength}}
    >
      prev
    </ButtonVisible>
    
  {{#if @slidesLength}}
    <div class="slider__counters">
    {{#each @slides key="@index" as |slide index|}}
      <ButtonPickSlide 
        @action={{action pickSlide index}} 
        @currentIndex={{currentIndex}} 
        @slideIndex={{index}} 
      />
    {{/each}}
    </div>
  {{/if}}

    <ButtonVisible 
      @action={{action nextSlide}} 
      @slidesLength={{@slidesLength}}
    >
      next
    </ButtonVisible>
  </footer>
</div>

GlimmerApp_component.ts

import Component from '@glimmer/component'

(function() {
  // https://developer.mozilla.org/en-US/docs/Web/Events/resize
  // requestAnimationFrame + customEvent
  function throttle(type, name, obj = window) {
      var running = false
      var func = function() {
          if (running) { return }
          running = true
            requestAnimationFrame(function() {
              obj.dispatchEvent(new CustomEvent(name))
              running = false
          })
      }
      obj.addEventListener(type, func)
  }

  throttle("resize", "optimizedResize")
})()

export default class extends Component {
  private _mapSlides = (item, index) => ({
    src: `./assets/images/slide_${index}.png`,
    alt: `slide #${index + 1}`
  })

  slides = new Array(7).fill(null).map(this._mapSlides)

  slide = new Array(1).fill(null).map(this._mapSlides)

  ratio_1_1 = (1 / 1).toFixed(2)
  ratio_4_3 = (4 / 3).toFixed(2)
  ratio_3_2 = (3 / 2).toFixed(2)
  ratio_16_9 = (16 / 9).toFixed(2)
  ratio_16_10 = (16 / 10).toFixed(2)
}

GlimmerApp_template.hbs

<div>
  <FluidSlider
    @title="fluid slider without slides"
  />
  <hr/>
  <FluidSlider
    @title="fluid slider with one slide"
    @slides={{slide}}
    @slidesLength={{slide.length}}
  />
  <hr/>
  <FluidSlider
    @title="fluid slider with many slides"
    @slides={{slides}}
    @slidesLength={{slides.length}}
  />
  <hr/>
  <FluidSlider
    @title="fluid slider ratio:1/1"
    @slides={{slides}}
    @slidesLength={{slides.length}}
    @ratio={{ratio_1_1}}
  />
  <hr/>
  <FluidSlider
    @title="fluid slider ratio:4/3"
    @slides={{slides}}
    @slidesLength={{slides.length}}
    @ratio={{ratio_4_3}}
  />
  <hr/>
  <FluidSlider
    @title="fluid slider ratio:3/2"
    @slides={{slides}}
    @slidesLength={{slides.length}}
    @ratio={{ratio_3_2}}
  />
  <hr/>
  <FluidSlider
  @title="fluid slider ratio:16/10"
  @slides={{slides}}
  @slidesLength={{slides.length}}
  @ratio={{ratio_16_10}}
  />
  <hr/>
  <FluidSlider
    @title="fluid slider ratio:16/9"
    @slides={{slides}}
    @slidesLength={{slides.length}}
    @ratio={{ratio_16_9}}
  />
</div>

<style>
  @charset "UTF-8";
  :root {
    font-size: 1rem;

    @media (min-width: 20rem) {
      font-size: calc(1rem + ((1vw - .20rem) * 1));
    }

    @media (min-width: 120rem) {
      font-size: 2rem;
    }
  }

  .slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: solid 1px black;
    margin: 0 auto;
    padding: 0;
    counter-reset: sliderBtn;
  }

  .slider__header {
    text-align: center;
    font-size: 1.5rem;
    margin: 0;
    padding: 1rem 0;
    border-bottom: solid 1px black;
  }

  .slider__header > h1 {
    font-size: inherit
  }

  .slider__wrapper {
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  .slider__slides {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    transition: all .5s;
    text-align: center;
  }

  .slider__slide {
    flex: 0 0 auto;
    display: table;
    max-width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    color: white;
    text-shadow: 0 .25rem .25rem black;
    font-size: 2rem;
    font-weight: 600;

  }

  .slider__slide > p {
    display: table-cell;
    vertical-align: middle;
  }

  .slider__slide:nth-child(7n+1) {
    background: red;
  }

  .slider__slide:nth-child(7n+2) {
    background: orange;
  }

  .slider__slide:nth-child(7n+3) {
    background: yellow;
  }

  .slider__slide:nth-child(7n+4) {
    background: green;
  }

  .slider__slide:nth-child(7n+5) {
    background: blue;
  }

  .slider__slide:nth-child(7n+6) {
    background: indigo;
  }

  .slider__slide:nth-child(7n+7) {
    background: violet;
  }

  .slider__footer {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-around;
    margin: 0;
    padding: .5rem;
    transition: all .5s;
    border-top: solid 1px black;
  }

  .slider__counters {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 0;
    transition: all .5s;
    text-align: center;
  }

  .slider__counter,
  .slider__button {
    font-size: .75rem;
  }

  .slider__counter {
    width: 2rem;
    height: 2rem;
    padding: .125rem;
  }

  .slider__counter::before {
    counter-increment: sliderBtn;
    /* On incrémente le compteur section */
    content: counter(sliderBtn);
  }

  .slider__button {
    width: 2rem;
    height: 2rem;
    padding: .125rem;
  }
</style>