All,
I'm very new to SDK components (and a novice with JS/JQuery in general) so be kind.
I'm trying to get this range slider developed as my own component in DS 1.6 ...
http://jqueryui.com/slider/#range-vertical
In the grand scheme of things, it appears to be very straight forward. When trying to incorporate it into DS, however, I'm having some problems and not sure of what to do next.
This code works perfectly, no issues, but it's not DS ...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
</head>
<body>
<div>
<div id="slider-range" style="height:400px; margin-top: 100px;"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#slider-range" ).slider({
orientation: "vertical",
range: true,
max: 100,
min: 0,
values: [ 0, 100 ],
stop: function( event, ui ) {
console.log(ui.values[ 0 ] + " " + ui.values[ 1 ]);
}
});
} );
</script>
</div>
</body>
</html>
My simple approach is to create a basic div below my component which is then assigned as the element that will contain the slider. This is the code within component.js ...
I've been debugging the logic and put simply, the ".slider" function that it normally calls is non-existent with the DS version of JQuery.
A few things ...
- It may be crude but you can see I'm pulling in the <script src...> for JQuery and JQuery UI within the component DIV. My understanding is that should ultimately work but am happy to be told otherwise.
- The version of JQuery that DS appears to be using is 1.11.1 ... according to documentation, this version supports the range slider. I know that because my basic test HTML document is using the same version.
- The whole testFunction approach wasn't the first thing I did but it still calls it so I went with and it means I can debug easier. The function is called because I get "This is a test" to the console so I'm happy with that for now.
I need my .slider function to be returned from the jquery-ui.js script but I can't seem to control that. $ is returning the DS JS version, which claims to 1.11.1 but the slider function doesn't exist yet I know it does in the true JQuery version.
DS JQuery Version
My JQuery Version (from the code above)
I'm a bit lost as to what I need to do. I haven't tried anything related to requireJS but maybe that's what I need to do?!? Sorry, just thought of that then.
Anyone's help would be appreciated.
Thanks
Brad
- SAP Managed Tags:
Accepted Solutions (1)
Answers (0)
| User | Count |
|---|---|
| 85 | |
| 10 | |
| 10 | |
| 9 | |
| 7 | |
| 6 | |
| 5 | |
| 5 | |
| 4 | |
| 3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.