slider for param

src/components/LayoutPanelComp.vue

@@ -30,17 +30,12 @@
 
     <div class="ma-3">
 
-      <ParamSlider v-model="parameters.number1" :choices="choices"/>
-
-      <ParamNumber 
-      name="Base Node Spacing :" 
-      v-model="parameters.test" 
-      unit="nodes" >
-      </ParamNumber>
+      <ParamSlider v-model="parameters.number1" name="Node proximity" :choices="choicesNodeSpacing"/>
       <HelpText :show-help="showHelp">
-          Space between rank of hierarchical layout
+          Vertical space between two nodes
       </HelpText>
 
+
       <h3 class="ma-3">  Steps  </h3>
 
       <ParamSwitch name="Take reaction reversibility into account" v-model="parameters.boolean1"/>
@@ -48,20 +43,16 @@
         If true, both directions of reversible reaction are considered; otherwise, only the direction specified in the file is considered
       </HelpText>
 
-      <ParamSwitch name="Treatment of directed cycles" v-model="parameters.boolean2"/>
+      <ParamSlider v-model="parameters.number2" name="Side compound edges" :choices="choicesEdgesSideCompounds"/>
       <HelpText :show-help="showHelp">
-        If true, directed cycles are arranged in a circle as much as possible 
+        The length of the side compound edge is at most the minimum length of edges that are not connected to side compounds, as it should always be shorter
       </HelpText>
 
-      <ParamNumber 
-      name="Side compound edge length :" 
-      v-model="parameters.test1" >
-      </ParamNumber>
+      <ParamSwitch name="Treatment of directed cycles" v-model="parameters.boolean2"/>
       <HelpText :show-help="showHelp">
-        The length of the side compound edge is proportional to the minimum length of edges that are not connected to side compounds
+        If true, directed cycles are arranged in a circle as much as possible 
       </HelpText>
 
-    ...
 
     </div>
 
@@ -170,15 +161,21 @@ onMounted(() => {
 ///////////////////////////////////////////////////////////////////
 //---------------------------- Parameters -------------------------
 
-const defaultParameters = { test:10, number1:1, test1 : 1/3, test2:"test2Default", boolean1:true,boolean2:true};
+const defaultParameters = {number2:0, number1:1, boolean1:true,boolean2:true};
 
 const parameters=ref({...defaultParameters});
 
-const choices:typeChoiceSlider={
-    0:"small",
+const choicesNodeSpacing:typeChoiceSlider={
+    0:"close",
+    1:"moderate",
+    2:"distant"
+};
+
+const choicesEdgesSideCompounds:typeChoiceSlider={
+    0:"short",
     1:"medium",
-    2:"large"
-}
+    2:"long"
+};
 
 ///////////////////////////////////////////////////////////////////
 //---------------------------- Functions -------------------------

src/components/ParamComp/ParamSliderComp.vue

 <template>
-    <v-row>
-      <v-col class="pa-12">
+
+    <div>
+        <div class="text-body-1">
+            {{ name }} :
+        </div>
+    
+        <div  class="d-flex justify-center mx-auto w-80">
         <v-slider
         v-model="size"
         :max="numberChoice-1"
@@ -9,8 +14,9 @@
         step="1"
         tick-size="2"
         ></v-slider>
-      </v-col>
-    </v-row>
+        </div>
+    </div>
+   
   </template>
 
   
@@ -23,10 +29,14 @@ import type { PropType } from 'vue'
 
 // Props (from parent to child component)
 const props = defineProps({
-  choices: {
-    type: Object as PropType<typeChoiceSlider>,
-    required : true
-  }
+    name: {
+        type: String,
+        required : true
+    },
+    choices: {
+        type: Object as PropType<typeChoiceSlider>,
+        required : true
+    }
 });
 
 //---------------------------- Get Set Value -------------------------
@@ -38,5 +48,10 @@ const size=defineModel({type:Number});
 const numberChoice:number=Object.keys(props.choices).length;
 
 
+</script>
 
-</script>
\ No newline at end of file
+<style scoped>
+.w-80{
+    width: 80%;
+}
+</style>
\ No newline at end of file