What is the best way to adjust the volume vertically?

I successfully transformed my volume slider from horizontal to vertical using CSS. However, the functionality of the volume slider still behaves as if it were horizontal. In other words, I have to click horizontally to adjust the volume instead of vertically.

HTML

<div class="jp-volume-bar wolf-volume">
                        <div class="jp-volume-bar-value"></div>
                    </div>

CSS

.wolf-jplayer-playlist .wolf-volume{
    display:none
}

.wolf-jplayer-playlist .jp-volume-bar{
    position:absolute;
    height: 50px;
    width: 5px;
    padding:0;
    overflow:hidden;
    top:85px;
    left:278px
}

.wolf-jplayer-playlist .jp-volume-bar:hover{
    cursor:pointer
}

.wolf-jplayer-playlist .jp-volume-bar-value{
    height: 300px;
    width: 20px;
    background-color: #db2537
}

Jquery (quite lengthy code):

http://djacademynegypt.com/wp-content/plugins/wolf-jplayer/assets/js/min/jquery.jplayer.concat.min.js?ver=2.1.7.3
jqueryhtmlcss

Answer №1

Utilize the jQuery UI Slider component:

View an example here.

To adjust the volume effectively, you need to interact with the jPlayer API within the 'slide' callback function:

$(".jp-volume-bar").slider({
   orientation: 'vertical',
   slide: function(event, ui) {      
      $(".jp-volume-bar-value").text(ui.value);
      $("#jpId").jPlayer("volume", ui.value/100); // Ensure to replace jpId with the player id
   }
});

HTML structure:

<div class="jp-volume-bar wolf-volume"></div>
<div class="jp-volume-bar-value"></div>

Check out the complete example here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

htmlcss

The navigation bar on the web app is functioning properly on Android devices but experiencing a CSS problem on

My Nextjs web app includes a navbar with a hamburger menu, logo, and avatar. The navbar functions perfectly on desktop in Chrome, Mozilla, Brave (in developer tools mobile mode), and on Android phones using Chrome. However, when accessed from an iPhone X, ...

htmlcssiosreactjsnext.js

Retrieve the visitor's IP address following the submission of an AJAX form

Currently, I am facing an issue with my HTML form and JavaScript method integration. Whenever a visitor submits the form, a JavaScript method is triggered which sends an AJAX request to a PHP file on my server. The problem arises when trying to retrieve ...

phpjavascriptjquery

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

javascripthtmlcssreactjssass

Tips for displaying Vue Components on an HTML5 canvas surface

How can I incorporate an htmlcanvas as the webpage background and overlay Vuejs components on top of it? I know the answer must exist, but I'm not sure where to start looking. ...

javascripthtmlvue.jshtml5-canvaspaperjs

Failure of default option to appear in dropdown menu in Angular

I currently have a dropdown list in my HTML setup like this: <select id="universitySel" ng-model="universityValue" ng-options="university._id for university in universities"> <option value="-1">Choose university</option> ...

javascriptjqueryhtmlangularjs

Is there a way to fill select boxes with multiple values?

As I set up a jqGrid, I encountered the challenge of visualizing multiple values in one cell. The data is sourced from a form where users can select multiple options. While I managed to display the select box, I struggled with populating it. My attempts to ...

javascriptjqueryjsonjqgridaramex

Guide to redirecting on click when utilizing an iframe

I needed to prevent the page from reloading before the action was complete by using an iframe. However, I encountered an issue where I needed the page to refresh after the action took place. I attempted two methods to achieve this - refreshing the page and ...

phphtmliframe

Extend the width of a div element to fit the size of its absolutely positioned

I am facing an issue with a Div that contains multiple absolutely positioned divs. The clickable area of the main div expands to cover the children, but the drawn area does not. I need the drawn area to encompass all the container divs. You can view a JSF ...

css

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

javascriptangularjshtml

How to ensure that HTML5 range input retains its value after multiple page reloads

How can I ensure that an HTML5 slider (input range) tag resets its position whenever the page is reloaded? Currently, it remains at the last dragged position upon reloading the page. ...

html

Issue with integrating Bootstrap into Angular 2

When attempting to link to the bootstrap.css file located in the node_modules folder within index.html, I encountered an error. The application's folder structure is as follows: ecommerce-app/node_modules ecommerce-app/src/app/index.html All attem ...

htmltwitter-bootstrapangular

If the template variable is empty, the nesting HTML element should be hidden

Check out my awesome template: <li><a href="/{{ user_data.room2 }}" id="room2">/{{ user_data.room2 }}</a></li> <li><a href="/{{ user_data.room3 }}" id="room3">/{{ user_data.room3 }}</a></li> < ...

pythonhtmldjango

Establishing a Goal in Google Analytics using JavaScript

My approach to recording Goals in Google Analytic tool via JS involves adding code directly to the page: <meta name="description" content="iReserve"> <link rel="shortcut icon" href="/ico/favicon.ico" /> & ...

javascriptjquerygoogle-analytics-apigoogle-tag-managergoal-tracking

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

When it comes to building an html document and returning it in a web api, many resources recommend using HttpResponseMessage. However, I am eager to achieve this using IHttpActionResult instead. Here is my current approach: [ResponseType(typeof(HttpRe ...

c#html.netasp.net-web-api

Issue with bootstrap: When multiple svg tags are added to my navbar, it causes the container content to be deleted

Utilizing the Jumbotron Example from Bootstrap Examples has led to a peculiar issue when adding multiple icons to the navbar. After inserting anything following the first icon, a significant portion of the "container" class mysteriously disappears, as if i ...

htmlcsssvgbootstrap-4icons

What is the correct way to utilize Html.Raw(Json.Encode(Model))?

I'm facing an issue with encoding my MVC Model using the code snippet below. The alert message is returning a null value, which is confusing to me since this is a create form. The HTML code structure is as follows: @using (Html.BeginForm()) { @H ...

jqueryajaxjsonasp.net-mvcasp.net-ajax

What is the best way to integrate an image gallery with twitter bootstrap?

I'm having trouble implementing an image gallery on my index page. Despite my efforts, I can't seem to achieve the desired behavior. Here's a snippet of my code: .container .row .col-md-8.col-sm-8.col-xs-8 - 4.times do |i| ...

cssimagetwitter-bootstrap

Is it necessary to have the WAI-ARIA attribute aria-labelledby on a nested input element?

Do I need the attribute aria-labelledby on an <input> element nested within a <label> element that acts as a label for the <input>? For example: <label>This is an input field: <input type="text" /> </label> Or should ...

htmlwai-aria

The Javascript navigation bar is not displaying properly on mobile devices as it should

After customizing the responsive navbar tutorial from W3Schools using CSS and JS, I encountered an issue. I wanted to include a logo and a web page title before the navbar, which worked perfectly when the webpage was maximized. However, when I resized the ...

javascripthtmlcssresponsive-design