BaklavaJS Range Slider

Readme.md

Required Libraries:

• @baklavajs/core@next
• @baklavajs/plugin-renderer-vue@next
• vue-slider-component

App.vue

<template>
  <div id="app" style="width: 100vw; height: 100vh;">
    <baklava-editor :plugin="viewPlugin"></baklava-editor>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Editor, NodeBuilder } from "@baklavajs/core";
import { ViewPlugin } from "@baklavajs/plugin-renderer-vue";
import SliderOption from "./SliderOption.vue";

@Component
export default class App extends Vue {

  editor = new Editor();
  viewPlugin = new ViewPlugin();

  created() {
    this.editor.use(this.viewPlugin);
    this.viewPlugin.registerOption("SliderOption", SliderOption);
    
    const sliderNodeType = new NodeBuilder("SliderNode")
      .addOption("Slider", "SliderOption", () => [3, 6], undefined, { min: 0, max: 10 })
      .addOutputInterface("Lower")
      .addOutputInterface("Upper")
      .onCalculate((n) => {
        n.getInterface("Lower").value = n.getOptionValue("Slider")[0];
        n.getInterface("Upper").value = n.getOptionValue("Slider")[1];
      })
      .build();
    this.editor.registerNodeType("SliderNode", sliderNodeType);

  }

}
</script>

main.ts

import Vue from 'vue'
import App from './App.vue'

import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue";
import "@baklavajs/plugin-renderer-vue/dist/styles.css";
Vue.use(BaklavaVuePlugin);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

SliderOption.vue

<template>
<div>
    <vue-slider
        :value="value"
        @input="$emit('input', $event)"
        :min="min"
        :max="max"
        :enable-cross="false"
        :height="18"
    ></vue-slider>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
import { INodeOption } from '@baklavajs/core/dist/types';

@Component({
    components: { VueSlider }
})
export default class SliderOption extends Vue {

    @Prop()
    option!: INodeOption;

    @Prop()
    value!: number;

    get min() {
        return this.option.min || 0;
    }

    get max() {
        return this.option.max || 1;
    }

}
</script>