Perfect Widgets Sample: HTML5 Rating Control

Creation of the rating bar described in the this article is quite intricate. How to create such widget in a simpler way? In this article, we will consider a more elegant implementation of the rating bar with its pros and cons.

 

Create a well-known bundle Guide->Scale->Slider.

 

 

Add underlayer to the Slider, let it be a Rectangle.

Also add a yellow LinearLevel.

 

Set slider step to 5 to make it possible to set value more than 4, but not 4.0372.

 

 

Bind LinearLevel value to the slider value.

And now here is the main trick of the article:

This is a semi-transparent picture with the cut-outs in the form of stars.

 

We will add it over the widget with the help of the Picture element.

To make this Picture element be ignored by the mouse pointer, you need to set its Active property to false.

 

And that’s all! Export the widget to JSON.

 

 Download sample here: AdvancedStarsDemoPage.zip

Add Feedback