Photo by Kelvin Yan on Unsplash

Photo by Kelvin Yan on Unsplash

Slider widget from the material library is used to select a value from a range of values.



🤔 What if I told you, we can use emojis as values for label parameter in Slider widget?!

🤩 You can use codepoints of an emoji or a package like demoji to display emojis in the slider’s label.

  • Codepoints for 💙 (Blue heart emoji) is U+1F499. So you can set label’s value to \u{1F499} to display a 💙.
  • If you’re using demoji package then you can set label’s value to Demoji.blue_heart.

🤓 Here is another example in which different emojis are shown for different values.

  • I’m using demoji package for this example.
  • Switch case is used to show different emoji for every value.
  • Here is the list of emojis available in this package.
  • This kind of slider can be used on the review page of an app. (🍕 Food Review, 🍎 Product Review, etc.)


That’s it for this one. Thank you for reading this 💙

You can check out the source code of the app here. Feel free to contribute to the project by creating issues or sending pull-requests.

For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.

If you find this post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.

Written By

Tirth Patel (piedcipher)