intermediate checkin during chart order form work

src/components/chart/MarketBuilder.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
+      <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
+      <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
+      <div>
+        <v-text-field type="number" v-model="os.slippage"
+                      density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                      label="Max Slippage" min="0" max="100" step="0.01"
+                      style="width: 9em;"
+                      clearable
+        >
+          <template v-slot:append-inner>%</template>
+        </v-text-field>
+      </div>
+    </v-sheet>
+</template>
+
+<script setup>
+import {useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults} from "@/misc.js";
+import {useOrderStore} from "@/store/store.js";
+
+const os = useOrderStore()
+const co = useChartOrderStore()
+const props = defineProps(['builder'])
+
+// Fields must be defined in order to be reactive
+builderDefaults(props.builder, {slippage: 0.10,})
+
+</script>
+
+<style scoped lang="scss">
+:deep(.v-slider.v-input--vertical > .v-input__control) {
+  min-height: 5em !important;
+}
+:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
+  background-color: inherit !important;
+}
+</style>
+