Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 263b844

Browse files
Committing the Vue Range Slider Getting Started sample
1 parent 00fa133 commit 263b844

File tree

9 files changed

+114
-0
lines changed

9 files changed

+114
-0
lines changed

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-inputs": "^24.1.41",
13+
"vue": "^3.3.11"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.5.2",
17+
"vite": "^5.0.8"
18+
}
19+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/App.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup>
2+
import { SliderComponent as EjsSlider } from "@syncfusion/ej2-vue-inputs";
3+
const value = [30,70];
4+
const type = 'Range';
5+
const tooltip = { isVisible: true, showOn: 'Always', placement: 'After' };
6+
const showButtons = true;
7+
const ticks = { smallStep: 10, largeStep: 20, placement: 'After', showSmallTicks: true,
8+
format: '##.##km'};
9+
const limits = { enabled: true, minStart: 10, minEnd: 30, maxStart: 40, maxEnd: 60 };
10+
</script>
11+
12+
<template>
13+
<ejs-slider :value="value" :type="type" :tooltip="tooltip" :showButtons="showButtons"
14+
:ticks="ticks" :limits="limits"></ejs-slider>
15+
</template>
16+
17+
<style>
18+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
19+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
20+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
21+
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
22+
.e-control-wrapper.e-slider-container .e-slider .e-handle
23+
{
24+
background-color: #f9920b;
25+
border-radius: 50%;
26+
border: 0;
27+
}
28+
</style>

‎src/assets/vue.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/components/HelloWorld.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/main.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
5+
createApp(App).mount('#app')

‎src/style.css

Whitespace-only changes.

‎vite.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /