5-Star Rating

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">5-Star Rating</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <div class="uk-margin-small-top uk-text-bold">Size</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-grid-small uk-child-width-1-4@m uk-text-center uk-flex-middle" uk-grid>
              <div>
                <div class="uk-inline"><input class="uk-rating" type="range" min="1" step="1" value="1" max="5" ></div>
                <div class="uk-form-label">Default</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-mini" type="range" min="1" step="1" value="2" max="5" ></div>
                <div class="uk-form-label">Mini</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-small" type="range" min="1" step="1" value="3" max="5" ></div>
                <div class="uk-form-label">Small</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-large" type="range" min="1" step="1" value="4" max="5" ></div>
                <div class="uk-form-label">Large</div>
              </div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Colors</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-grid-small uk-child-width-1-4@m uk-text-center" uk-grid>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-primary" type="range" min="1" step="1" value="2" max="5" ></div>
                <div class="uk-form-label">Primary</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-secondary" type="range" min="1" step="1" value="3" max="5" ></div>
                <div class="uk-form-label">Secondary</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-success" type="range" min="1" step="1" value="4" max="5" ></div>
                <div class="uk-form-label">Success</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-danger" type="range" min="1" step="1" value="5" max="5" ></div>
                <div class="uk-form-label">Danger</div>
              </div>
            </div>
          </div>
          <div class="uk-margin-small-top uk-text-bold">Styles</div>
          <div class="uk-placeholder uk-padding-small uk-margin-remove-top">
            <div class="uk-grid-small uk-child-width-1-4@m uk-text-center" uk-grid>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-half" type="range" min=".5" step=".5" value="2.5" max="5" ></div>
                <div class="uk-form-label">Half stars</div>
              </div>
              <div>
                <div class="uk-inline"><input class="uk-rating uk-rating-heart uk-rating-danger" type="range" min="1" step="1" value="4" max="5" ></div>
                <div class="uk-form-label">Hearts</div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

/* Snippets style */
body { background-color: #ebebeb; }
.uk-box-shadow-remove { box-shadow: none; }
.uk-text-mini { font-size: 8px; }
:root {
  --color-default: #c7c7c7;
  --color-primary: #3b82f6;
  --color-secondary: #6366f1;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
}

/* Style */
.uk-rating {
  --ratio: 5;
  --size: 25px;
  --width: calc(var(--size)*var(--ratio));
  --average: calc(var(--size)/2);
  aspect-ratio: var(--ratio);
  padding-inline: var(--average);
  width: var(--width);
  height: var(--size);
  box-sizing: border-box;
  appearance: none;
  cursor: pointer;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 5 L79 95 L2 40 L98 40 L21 95 Z'/></svg>");
  mask-size: var(--size);
}
.uk-rating-heart {
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M49.36,21.311c-0.213,-0.424 -14.24,-28.267 -38.538,-8.445c-33.937,34.599 37.85,81.747 38.534,82.197c0.687,-0.45 72.471,-47.601 38.538,-82.203c-24.302,-19.823 -38.326,8.02 -38.538,8.444l0.004,0.007Z'/></svg>");
}
.uk-rating-half {
  --ratio: 5;
  --average: calc(var(--size)/4);
}
.uk-rating-mini {
  --size: 15px;
}
.uk-rating-small {
  --size: 20px;
}
.uk-rating-large {
  --size: 30px;
}
.uk-rating::-webkit-slider-thumb {
  width: 0;
  height: var(--size);
  border-image: linear-gradient(90deg, var(--color-warning) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
  appearance: none;
}
.uk-rating::-moz-range-thumb {
  width: 0;
  height: var(--size);
  border-image: linear-gradient(90deg, var(--color-warning) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
  appearance: none;
}

.uk-rating-primary::-webkit-slider-thumb,
.uk-rating-primary::-moz-range-thumb {
  border-image: linear-gradient(90deg, var(--color-primary) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
}
.uk-rating-secondary::-webkit-slider-thumb,
.uk-rating-secondary::-moz-range-thumb {
  border-image: linear-gradient(90deg, var(--color-secondary) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
}
.uk-rating-success::-webkit-slider-thumb,
.uk-rating-success::-moz-range-thumb {
  border-image: linear-gradient(90deg, var(--color-success) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
}
.uk-rating-danger::-webkit-slider-thumb,
.uk-rating-danger::-moz-range-thumb {
  border-image: linear-gradient(90deg, var(--color-danger) calc(50% + var(--average)), var(--color-default) 0) fill 0//0 var(--width);
}

Information

Detailed overview of a selected code snippet

antonius

26.03.2025, 16:01:15

28.03.2025, 11:16:18

uk-border, uk-box, uk-card, uk-child, uk-container, uk-flex, uk-form, uk-grid, uk-inline, uk-margin, uk-padding, uk-placeholder, uk-rating, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!