Сделал фронтенд

src/components/generators/RangeGenerator.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-form label-position="top" class="generator-form" @submit.prevent="onGenerate">
+    <el-form-item label="Минимум">
+      <el-input-number v-model="min" :controls="true" />
+    </el-form-item>
+    <el-form-item label="Максимум">
+      <el-input-number v-model="max" :controls="true" />
+    </el-form-item>
+    <el-form-item label="Количество">
+      <el-input-number v-model="count" :min="1" :controls="true" />
+    </el-form-item>
+    <el-form-item>
+      <el-checkbox v-model="unique">Только уникальные значения</el-checkbox>
+    </el-form-item>
+    <el-button type="primary" native-type="submit" size="large">
+      Сгенерировать
+    </el-button>
+  </el-form>
+</template>
+
+<script>
+import { ElMessage } from 'element-plus'
+import { generateRange } from '@/utils/random'
+
+export default {
+  name: 'RangeGenerator',
+  emits: ['result'],
+  data() {
+    return {
+      min: 1,
+      max: 100,
+      count: 5,
+      unique: false
+    }
+  },
+  methods: {
+    onGenerate() {
+      if (this.min > this.max) {
+        ElMessage.error('Минимум не может быть больше максимума')
+        return
+      }
+      if (this.count < 1) {
+        ElMessage.error('Количество должно быть не меньше 1')
+        return
+      }
+      try {
+        this.$emit('result', generateRange(this.min, this.max, this.count, this.unique))
+      } catch (err) {
+        ElMessage.error(err.message)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.generator-form {
+  max-width: 420px;
+}
+
+:deep(.el-input-number) {
+  width: 100%;
+}
+</style>